P
CUI v1.20.1177
Documentation and examples in using Leaflet with PCUI
<link href="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/css/leaflet.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Leaflet/css/Leaflet.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/css/leaflet-toolbar.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/css/DrawToolbar/leaflet.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/css/DrawToolbar/leaflet-toolbar.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/css/DrawToolbar/leaflet-draw.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/css/DrawToolbar/leaflet-draw-toolbar.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/css/LeafletMeasure/leaflet-measure.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/js/leaflet.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/js/leaflet-src.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/js/DrawToolbar/leaflet-src.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/js/DrawToolbar/leaflet.draw-src.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/js/DrawToolbar/leaflet.toolbar-src.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/js/DrawToolbar/leaflet.draw-toolbar.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Leaflet/Plugins/js/LeafletMeasure/leaflet-measure.js"></script>
<!-- This will serve as the container of the map, take note of the ID because it will be used in setting up. -->
<div id="map" style="height: 500px;">
</div>
// Setup your map first, the parameter will be the id of the container of the map
var map = L.map('map').setView([51.441767, 5.470247], 7),
drawnItems = new L.FeatureGroup().addTo(map);
// Then add a Map layer
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// This line is for the Measure tool, used to get the LngLat of point 1,
// and then computes the distance from point 1 and so on..
var measureControl = new L.Control.Measure();
measureControl.addTo(map);
// DrawToolbar initialization, has a property that sets the position to top left
new LeafletToolbar.DrawToolbar({
position: 'topleft'
}).addTo(map);
// EditToolbar initialization, used to modify drawn shapes
new LeafletToolbar.EditToolbar.Control({
position: 'topleft'
}).addTo(map, drawnItems);
map.on('draw:created', function (evt) {
var type = evt.layerType,
layer = evt.layer;
drawnItems.addLayer(layer);
});
// Add custom shape, in this line Circle is used to be drawn on the map
var shapes = L.featureGroup().addTo(map);
shapes.addLayer(L.circle([51.441767, 5.470247], 100000));
// Custom click function that shows the LatLng of a drawn shape
shapes.on("click", function (event) {
alert(event.latlng.toString());
});
// Another custom click function that gets the coordinates of a drawn shape
drawnItems.on("click", function (event) {
console.log(event);
alert('Drawn Shape coordinates: ' + event.layer._latlngs);
});
// Custom action to be integrated with a tool, navigates the map to set the view to Eiffel Tower, Paris
var MyCustomAction = LeafletToolbar.ToolbarAction.extend({
options: {
toolbarIcon: {
html: "⚑",
tooltip: "Go to the Eiffel Tower"
}
},
addHooks: function () {
map.setView([48.85815, 2.2942], 19);
}
});
// And then add the custom function to the map
new LeafletToolbar.Control({
position: 'topright',
actions: [MyCustomAction]
}).addTo(map);
// Layer switcher
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
var topoMap = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
attribution: "© " + mapLink + " Contributors",
maxZoom: 18,
minZoom: 3,
}).addTo(map);
//// Maps
var imageryMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
var darkMap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png');
var streetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}');
// Layers control
var baseMaps = {
Topographic: topoMap,
Imagery: imageryMap,
DarkMode: darkMap,
Streets: streetMap
};
var overlayMaps = {
Circle: shapes
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
<!-- This will serve as the container of the map, take note of the ID because it will be used in setting up. -->
<div id="map" style="height: 500px;">
</div>
var map = L.map('map').setView([51.441767, 5.470247], 7),
drawnItems = new L.FeatureGroup().addTo(map);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<!-- This will serve as the container of the map, take note of the ID because it will be used in setting up. -->
<div id="map" style="height: 500px;">
</div>
//TOOLBARS
var measureControl = new L.Control.Measure();
measureControl.addTo(map);
new LeafletToolbar.DrawToolbar({
position: 'topleft'
}).addTo(map);
new LeafletToolbar.EditToolbar.Control({
position: 'topleft'
}).addTo(map, drawnItems);
map.on('draw:created', function (evt) {
var type = evt.layerType,
layer = evt.layer;
drawnItems.addLayer(layer);
});
var shapes = L.featureGroup().addTo(map);
shapes.addLayer(L.circle([51.441767, 5.470247], 100000));
shapes.on("click", function (event) {
alert(event.latlng.toString());
});
drawnItems.on("click", function (event) {
console.log(event);
alert('Drawn Shape coordinates: ' + event.layer._latlngs);
});
var MyCustomAction = LeafletToolbar.ToolbarAction.extend({
options: {
toolbarIcon: {
html: "⚑",
tooltip: "Go to the Eiffel Tower"
}
},
addHooks: function () {
map.setView([48.85815, 2.2942], 19);
}
});
new LeafletToolbar.Control({
position: 'topright',
actions: [MyCustomAction]
}).addTo(map);
<!-- This will serve as the container of the map, take note of the ID because it will be used in setting up. -->
<div id="map" style="height: 500px;">
</div>
// Layer switcher
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
var topoMap = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
attribution: "© " + mapLink + " Contributors",
maxZoom: 18,
minZoom: 3,
}).addTo(map);
//// Maps
var imageryMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
var darkMap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png');
var streetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}');
// Layers control
var baseMaps = {
Topographic: topoMap,
Imagery: imageryMap,
DarkMode: darkMap,
Streets: streetMap
};
L.control.layers(baseMaps).addTo(map);
<!-- This will serve as the container of the map, take note of the ID because it will be used in setting up. -->
<div id="custom-pins-popups" style="height: 500px;">
</div>
var customPinsPopups = L.map('custom-pins-popups').setView([52.2047, 4.50787], 7);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(customPinsPopups);
var redPin = L.icon({
iconUrl: 'https://s3.amazonaws.com/com.cartodb.users-assets.production/production/jonmrich/assets/20150203194453red_pin.png',
iconSize: [38, 40],
shadowSize: [50, 64],
iconAnchor: [10, 33],
shadowAnchor: [4, 62],
popupAnchor: [2, -35]
});
var greenPin = L.icon({
iconUrl: 'https://images.vexels.com/media/users/3/142675/isolated/preview/84e468a8fff79b66406ef13d3b8653e2-house-location-marker-icon-by-vexels.png',
iconSize: [25, 40],
iconAnchor: [10, 33],
popupAnchor: [2, -35]
});
var customPopupRed = "<p>I am a popup from the red pin, with a text field element.</p><br />
<div class='ui input'>
<input type='text' placeholder='Enter here...'>
</div>";
var customPopupHouse = "<p>Is this the Hawkins High School?</p><br /> \
<div class='ui buttons'> \
<button class='ui button'>No</button> \
<div class='or'></div> \
<button class='ui positive button'>Yes/button> \
</div>";
// In this line, you can add custom classes for your popups
var customOptions =
{
'className': 'custom'
};
L.marker([51.5, 4], { icon: redPin }).addTo(customPinsPopups).bindPopup(customPopupRed, customOptions);
L.marker([52.65, 6], { icon: greenPin }).addTo(customPinsPopups).bindPopup(customPopupHouse, customOptions);
<!-- This will serve as the container of the map, take note of the ID because it will be used in setting up. -->
<div id="leaflet-clustering" style="height: 500px;">
</div>
// Marker Cluster initialization
var markerCluster = L.markerClusterGroup();
// add new Layer groups as the container of clusters
var layer1 = new L.LayerGroup();
var layer2 = new L.LayerGroup();
var layer3 = new L.LayerGroup();
var layer4 = new L.LayerGroup();
// add markers to designated layer groups
L.marker([49.879495, 8.652022]).bindPopup('Aktivspielplatz Herrngarten').addTo(layer1);
L.marker([49.881454, 8.655729]).bindPopup('Spielplatz Friedrich-Ebert-Platz').addTo(layer1);
L.marker([49.87897047381148, 8.65400791168213]).bindPopup('Prinz-Georg-Garden').addTo(layer1);
L.marker([49.878956646392496, 8.65101993083954]).bindPopup('Slackline Anlage').addTo(layer1);
L.marker([49.884377555288545, 8.67094472050667]).bindPopup('Peter-Behrens-Strabe').addTo(layer2);
L.marker([49.88244189489619, 8.674978762865068]).bindPopup('Weberweg').addTo(layer2);
L.marker([49.8808380032044, 8.669485598802568]).bindPopup('Corps Franconia').addTo(layer2);
L.marker([49.88139377585587, 8.67424065247178]).bindPopup('Brahmsweg').addTo(layer2);
L.marker([49.88547248684543, 8.677404820919039]).bindPopup('Haydnweg').addTo(layer2);
L.marker([49.884705162451006, 8.67411106824875]).bindPopup('Baderweg').addTo(layer2);
L.marker([49.88975465451026, 8.68499279022217]).bindPopup('Aktivspielplatz Herrngarten').addTo(layer3);
L.marker([49.8929756155455, 8.688168525695803]).bindPopup('Bogenweg').addTo(layer3);
L.marker([49.89182825922435, 8.6947238445282]).bindPopup('Rondelschneise').addTo(layer3);
L.marker([49.89201487927869, 8.679403066635134]).bindPopup('Saugartenschneise').addTo(layer3);
L.marker([49.88775008526658, 8.664071559906008]).bindPopup('Nordbad').addTo(layer4);
L.marker([49.88808879419066, 8.666356801986696]).bindPopup('Lake near Nordbad').addTo(layer4);
L.marker([49.889851424712035, 8.665369749069216]).bindPopup('Burgerpark Nord').addTo(layer4);
L.marker([49.88938830841737, 8.669693470001222]).bindPopup('Maschinenteich').addTo(layer4);
// add the layer to the Marker Cluster
markerCluster.addLayer(layer1);
markerCluster.addLayer(layer2);
markerCluster.addLayer(layer3);
markerCluster.addLayer(layer4);
// Leaflet map initialization
var mbAttr = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors ',
mbUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
streets = L.tileLayer(mbUrl, { id: 'mapbox.streets', attribution: mbAttr });
var leafletClusteringMap = L.map('leaflet-clustering', {
center: [49.886, 8.671],
zoom: 13,
layers: [streets, markerCluster]
});