Skip to content

Commit

Permalink
Merge pull request #4 from sbruggmann/feature/javascript-api
Browse files Browse the repository at this point in the history 
Feature/JavaScript API
  • Loading branch information
@sbruggmann
sbruggmann authored Jul 18, 2019
2 parents b9e839c + 4f2f741 commit 5c4c8fe
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 43 deletions.
4 changes: 3 additions & 1 deletion Configuration/Settings.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ WebExcess:
OpenStreetMap:
tilesUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
minZoom: 6
maxZoom: 20
maxZoom: 18
style: ~ # ~, grayscale or dark
ratio: '3:2'
address: ~ # Talisker Distillery, Carbost, Scotland
lat: ~ # 57.302387
lon: ~ # -6.356159
paddingTopLeft: [100, 100]
paddingBottomRight: [100, 100]
mapOptions: []
30 changes: 29 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,14 @@ It's best practice to include them in your custom builds and remove the default
OpenStreetMap:
tilesUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
minZoom: 6
maxZoom: 20
maxZoom: 18
style: ~ # ~, grayscale or dark
ratio: '3:2'
address: ~ # Talisker Distillery, Carbost, Scotland
lat: ~ # 57.302387
lon: ~ # -6.356159
paddingTopLeft: [100, 100]
paddingBottomRight: [100, 100]
mapOptions: []


Expand Down Expand Up @@ -103,6 +105,32 @@ or with an external source..
Geocode.latLonFromAddress('Talisker Distillery, Carbost, Scotland')


## Interacting with JavaScript

**Methods**

mapIds = window.openStreetMap.getMapIds();
> Array [ "map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c", "map-b9ffb901-e91e-4261-a127-ec3246bc6350", .. ]

map = window.openStreetMap.getMap('map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c');
> { MapObject }

markers = window.openStreetMap.getMarkers('map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c');
> Array [ { MarkerObject }, { MarkerObject }, ... ]

**Events**

document.addEventListener('initializedOpenStreetMap', e => {
console.log(e);
});
> { details: { map: { MapObject }, mapId: 'map-123..' }, ...DefaultEventProperties }

document.addEventListener('addedOpenStreetMapMarkers', e => {
console.log(e);
});
> { details: { map: { MapObject }, mapId: 'map-123..', geoJson: { GeoJSON } }, ...DefaultEventProperties }


## Leaflet Map Options

See [leafletjs.com](https://leafletjs.com/reference-1.3.4.html#map-option)
Expand Down
139 changes: 100 additions & 39 deletions Resources/Private/Assets/Main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
window.initOpenStreetMap = function() {
function OpenStreetMap() {

var $this = this;

var mapIds = [];

var maps = [];

var markers = [];

var mapOptions = {
imagePath: '_Resources/Static/Packages/WebExcess.OpenStreetMap/Assets/',
// dragging: false,
Expand Down Expand Up @@ -87,14 +93,71 @@ window.initOpenStreetMap = function() {
}());
}

try {
Array.from(document.querySelectorAll('.webexcess-openstreetmap__map')).forEach(function (mapContainer) {
var mapId = mapContainer.getAttribute('id');
initMap(mapContainer, mapId);
this.addGeoJsonToMap = function(mapElement, geoJsonObject) {
var paddingTopLeft = mapElement._container.getAttribute('data-padding-topleft');
if (paddingTopLeft) {
paddingTopLeft = JSON.parse(paddingTopLeft);
} else {
paddingTopLeft = 100;
}

var paddingBottomRight = mapElement._container.getAttribute('data-padding-bottomright');
if (paddingTopLeft) {
paddingBottomRight = JSON.parse(paddingBottomRight);
} else {
paddingBottomRight = 100;
}

var geojsonLayer = L.geoJSON(geoJsonObject, {
pointToLayer: function(geoJsonPoint, latlng) {
var marker = L.marker(latlng);
if (geoJsonPoint.properties.popup) {
marker.bindPopup(geoJsonPoint.properties.popup);
}
if (geoJsonPoint.properties.tooltip) {
marker.bindTooltip(geoJsonPoint.properties.tooltip);
}
markers[mapElement._container.attributes.id.value].push(marker);
return marker;
}
}).addTo(mapElement);
mapElement.fitBounds(geojsonLayer.getBounds(), {
paddingTopLeft: paddingTopLeft,
paddingBottomRight: paddingBottomRight
});

var addedOpenStreetMapMarkersEvent = new CustomEvent('addedOpenStreetMapMarkers', {
detail: {
map: mapElement,
mapId: mapElement._container.attributes.id.value,
geoJson: geoJsonObject
}
});
} catch (e) {
console.log(e);
}
document.dispatchEvent(addedOpenStreetMapMarkersEvent);
};

this.getMapIds = function () {
return mapIds;
};

this.getMap = function (mapId) {
return maps[mapId];
};

this.getMarkers = function (mapId) {
return markers[mapId];
};

this.init = function () {
try {
Array.from(document.querySelectorAll('.webexcess-openstreetmap__map')).forEach(function (mapContainer) {
var mapId = mapContainer.getAttribute('id');
initMap(mapContainer, mapId);
});
} catch (e) {
console.log(e);
}
};

function initMap(mapContainer, mapId) {
var mapSpecificOptions = mapContainer.getAttribute('data-map-options');
Expand All @@ -105,12 +168,16 @@ window.initOpenStreetMap = function() {
}
mapSpecificOptions = Object.assign({}, mapOptions, mapSpecificOptions);

mapIds.push(mapId);
maps[mapId] = new L.Map(mapId, mapSpecificOptions);
markers[mapId] = [];

var minZoom = mapContainer.getAttribute('data-min-zoom');
var maxZoom = mapContainer.getAttribute('data-max-zoom');
var tilesUrl = mapContainer.getAttribute('data-tiles-url');
var tiles = new L.TileLayer(tilesUrl, {
minZoom: mapContainer.getAttribute('data-min-zoom'),
maxZoom: mapContainer.getAttribute('data-max-zoom'),
minZoom: minZoom,
maxZoom: maxZoom,
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
});
maps[mapId].addLayer(tiles);
Expand All @@ -120,15 +187,17 @@ window.initOpenStreetMap = function() {
var popup = mapContainer.getAttribute('data-popup');
var tooltip = mapContainer.getAttribute('data-tooltip');
if (lat && lng) {
maps[mapId].setView(L.latLng(lat, lng), 15);
var marker = L.marker([lat, lng]);
if (popup) {
marker.bindPopup(popup);
}
if (tooltip) {
marker.bindTooltip(tooltip);
}
marker.addTo(maps[mapId]);
$this.addGeoJsonToMap(maps[mapId], [{
'type': 'Feature',
'properties': {
'tooltip': tooltip,
'popup': popup
},
'geometry': {
'type': 'Point',
'coordinates': [lng, lat]
}
}]);
}

var geoJson = mapContainer.getAttribute('data-json');
Expand All @@ -142,42 +211,34 @@ window.initOpenStreetMap = function() {
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
geoJsonObject = JSON.parse(request.responseText.trim());
window.addOpenStreetMapGeoJSON(maps[mapId], geoJsonObject);
$this.addGeoJsonToMap(maps[mapId], geoJsonObject);
}
};
request.send();

} else {
geoJsonObject = JSON.parse(geoJson);
window.addOpenStreetMapGeoJSON(maps[mapId], geoJsonObject);
$this.addGeoJsonToMap(maps[mapId], geoJsonObject);
}
} catch (e) {
console.log(e);
}
}

var initializedOpenStreetMapEvent = new CustomEvent('initializedOpenStreetMap', {
detail: {
map: maps[mapId],
mapId: mapId,
}
});
document.dispatchEvent(initializedOpenStreetMapEvent);

setInterval(function () {
document.getElementById(mapId).classList.remove('hide-leaflet-pane');
}, 500);
}
};

window.addOpenStreetMapGeoJSON = function(mapElement, geoJsonObject) {
var geojsonLayer = L.geoJSON(geoJsonObject, {
pointToLayer: function(geoJsonPoint, latlng) {
var marker = L.marker(latlng);
if (geoJsonPoint.properties.popup) {
marker.bindPopup(geoJsonPoint.properties.popup);
}
if (geoJsonPoint.properties.tooltip) {
marker.bindTooltip(geoJsonPoint.properties.tooltip);
}
return marker;
}
}).addTo(mapElement);
mapElement.fitBounds(geojsonLayer.getBounds(), {
padding: [100, 100]
});
};
window.openStreetMap = new OpenStreetMap();

window.addEventListener('load', initOpenStreetMap);
window.addEventListener('load', window.openStreetMap.init);
13 changes: 13 additions & 0 deletions Resources/Private/Assets/Main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,5 +63,18 @@
a.leaflet-control-zoom-in {
border-bottom-color: rgba(0, 0, 0, 0.4);
}

.leaflet-popup-content {
max-height: 200px;
overflow: auto;

p {
margin-top: 0;
}

p:last-child {
margin-bottom: 0;
}
}
}
}
10 changes: 10 additions & 0 deletions Resources/Private/Fusion/Components/Map.fusion
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,14 @@ prototype(WebExcess.OpenStreetMap:Map.Component) < prototype(Neos.Fusion:Compone
defaultLon = ${Configuration.setting('WebExcess.OpenStreetMap.lon')}
lonRenderer = ${this.lon ? this.lon : (this.latLonRenderer ? this.latLonRenderer.lon : this.defaultLon)}

paddingTopLeft = null
defaultPaddingTopLeft = ${Json.stringify(Configuration.setting('WebExcess.OpenStreetMap.paddingTopLeft'))}
paddingTopLeftRenderer = ${this.paddingTopLeft ? this.paddingTopLeft : this.defaultPaddingTopLeft}

paddingBottomRight = null
defaultPaddingBottomRight = ${Json.stringify(Configuration.setting('WebExcess.OpenStreetMap.paddingBottomRight'))}
paddingBottomRightRenderer = ${this.paddingBottomRight ? this.paddingBottomRight : this.defaultPaddingBottomRight}

tooltip = null
tooltipRenderer = ${this.tooltip ? this.tooltip : null}

Expand Down Expand Up @@ -65,6 +73,8 @@ prototype(WebExcess.OpenStreetMap:Map.Component) < prototype(Neos.Fusion:Compone
data-max-zoom = ${props.maxZoomRenderer}
data-lat = ${props.latRenderer}
data-lon = ${props.lonRenderer}
data-padding-topleft = ${props.paddingTopLeftRenderer}
data-padding-bottomright = ${props.paddingBottomRightRenderer}
data-tooltip = ${props.tooltipRenderer}
data-popup = ${props.popupRenderer}
data-json = ${props.jsonRenderer}
Expand Down
2 changes: 1 addition & 1 deletion Resources/Public/Assets/Main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -633,4 +633,4 @@
margin-left: -12px;
border-right-color: #fff;
}
.webexcess-openstreetmap{position:relative;overflow:hidden;height:0;padding-top:75%;width:100%;margin-bottom:1.5rem;border:1px solid rgba(0,0,0,.4)}.webexcess-openstreetmap,.webexcess-openstreetmap .webexcess-openstreetmap__map.leaflet-container{background-color:#f1f1f1;background-image:url(/_Resources/Static/Packages/WebExcess.OpenStreetMap/Assets/webexcess-globe.svg);background-position:50% 50%;background-size:25% 50%;background-repeat:no-repeat;background-blend-mode:soft-light}.webexcess-openstreetmap .webexcess-openstreetmap__map.leaflet-container{background-blend-mode:overlay}.webexcess-openstreetmap__map{position:absolute;top:0;left:0;width:100%;height:100%}.webexcess-openstreetmap__map--grayscale .leaflet-tile-pane{filter:grayscale(1)}.webexcess-openstreetmap__map--dark .leaflet-tile-pane{filter:grayscale(1) invert(1)}.webexcess-openstreetmap__map .hide-leaflet-pane .leaflet-marker-pane,.webexcess-openstreetmap__map .hide-leaflet-pane .leaflet-shadow-pane{visibility:hidden}.webexcess-openstreetmap__map div.leaflet-control-zoom{border-radius:0;border-width:1px;border-color:rgba(0,0,0,.4)}.webexcess-openstreetmap__map a.leaflet-control-zoom-in,.webexcess-openstreetmap__map a.leaflet-control-zoom-out{font-weight:100;border-radius:0;border-bottom-color:rgba(0,0,0,.4);width:28px;height:28px;line-height:26px;font-style:20px}.webexcess-openstreetmap__map a.leaflet-control-zoom-in{border-bottom-color:rgba(0,0,0,.4)}
.webexcess-openstreetmap{position:relative;overflow:hidden;height:0;padding-top:75%;width:100%;margin-bottom:1.5rem;border:1px solid rgba(0,0,0,.4)}.webexcess-openstreetmap,.webexcess-openstreetmap .webexcess-openstreetmap__map.leaflet-container{background-color:#f1f1f1;background-image:url(/_Resources/Static/Packages/WebExcess.OpenStreetMap/Assets/webexcess-globe.svg);background-position:50% 50%;background-size:25% 50%;background-repeat:no-repeat;background-blend-mode:soft-light}.webexcess-openstreetmap .webexcess-openstreetmap__map.leaflet-container{background-blend-mode:overlay}.webexcess-openstreetmap__map{position:absolute;top:0;left:0;width:100%;height:100%}.webexcess-openstreetmap__map--grayscale .leaflet-tile-pane{filter:grayscale(1)}.webexcess-openstreetmap__map--dark .leaflet-tile-pane{filter:grayscale(1) invert(1)}.webexcess-openstreetmap__map .hide-leaflet-pane .leaflet-marker-pane,.webexcess-openstreetmap__map .hide-leaflet-pane .leaflet-shadow-pane{visibility:hidden}.webexcess-openstreetmap__map div.leaflet-control-zoom{border-radius:0;border-width:1px;border-color:rgba(0,0,0,.4)}.webexcess-openstreetmap__map a.leaflet-control-zoom-in,.webexcess-openstreetmap__map a.leaflet-control-zoom-out{font-weight:100;border-radius:0;border-bottom-color:rgba(0,0,0,.4);width:28px;height:28px;line-height:26px;font-style:20px}.webexcess-openstreetmap__map a.leaflet-control-zoom-in{border-bottom-color:rgba(0,0,0,.4)}.webexcess-openstreetmap__map .leaflet-popup-content{max-height:200px;overflow:auto}.webexcess-openstreetmap__map .leaflet-popup-content p{margin-top:0}.webexcess-openstreetmap__map .leaflet-popup-content p:last-child{margin-bottom:0}
2 changes: 1 addition & 1 deletion Resources/Public/Assets/Main.js
View file

Large diffs are not rendered by default.

0 comments on commit 5c4c8fe

Please sign in to comment.