Leaflet v1.03: Make CircleMarker draggable? - leaflet

does some Leaflet guru has an idea, what's the easiest way to make a CircleMarker draggable in Leaflet v1.0.3?
It's easy to do it for "standard" markers by using the "draggable"-option. But such an option doesn't exist for CircleMarker. I tried it by using several Events, but the problem is, that not the marker is being moved but the underlying map.
Another possibility could be the use of "stopPropagation"-Function (but just for DOMEvents). Or the use of "removeEventParent"... if the "parent" of the CircleMarker is the map and its events?
Regarding to the Documentation there also DOMUtility/Draggable-class. Is this what I need?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Markers</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<style>
body {padding: 0; margin: 0;}
html, body, #map {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
var layerOsm = new L.TileLayer('https://{s}.api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicHBldGUiLCJhIjoiY2lsdmE2ZmQ2MDA4OHZxbTZpcmx1emtqbSJ9.Two7SPSaIZysqgOTrrLkRg', {
subdomains: 'ab', maxZoom: 20, noWrap:true, attribution:'Mapbox | OpenStreetMap' });
var map = new L.Map('map').addLayer(layerOsm).setView(new L.LatLng(47.8, 13.0), 14);
L.marker([47.8, 13.0], {draggable:true}).addTo(map);
var circle = L.circleMarker([47.81, 13.01], {radius:30}).addTo(map);
circle.on('mousedown', function () {
map.on('mousemove', function (e) {
circle.setLatLng(e.latlng);
});
});
map.on('mouseup', function(){
map.removeEventListener('mousemove');
})
</script>
</body>
</html>


Leaflet v1.0+ solution:
var marker = L.circleMarker([41.91847, -74.62634]).addTo(map)
// extract trackCursor as a function so this specific
// "mousemove" listener can be removed on "mouseup" versus
// all listeners if we were to use map.off("mousemove")
function trackCursor(evt) {
marker.setLatLng(evt.latlng)
}
marker.on("mousedown", function() {
map.dragging.disable()
map.on("mousemove", trackCursor)
})
map.on("mouseup", function() {
map.dragging.enable()
map.off("mousemove", trackCursor)
})
To make this behaviour more re-useable we could encapsulate it in a function (JS ES6 syntax):
function moveableMarker(map, marker) {
function trackCursor(evt) {
marker.setLatLng(evt.latlng)
}
marker.on("mousedown", () => {
map.dragging.disable()
map.on("mousemove", trackCursor)
})
marker.on("mouseup", () => {
map.dragging.enable()
map.off("mousemove", trackCursor)
})
return marker
}
You can then make a marker draggable / moveable like so:
const moveable = moveableMarker(map, marker)
These examples helped construct the above solution:
Akshay Agrawal's JS Fiddle example
Jedidiah Hurt's Leaflet 1.0 draggable circle


Found another answer at https://github.com/w8r/Leaflet.Path.Drag/
I just added the Leaflet.Path.Drag.js. Now I can read in from my REST service all my sites and move them.
var data = {
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-73.7979125, 42.704642
]
},
"type": "Feature",
"properties": {
"popupContent": "This is Point 1. "
},
"id": 51
},
{
"geometry": {
"type": "Point",
"coordinates": [
-73.630371,42.698585
]
},
"type": "Feature",
"properties": {
"popupContent": "This is Point 2. "
},
"id": 52
}
]
};
var map = L.map('map', {editable: true}).setView([43, -74], 8);
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© OpenStreetMap //contributors'}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = feature.properties.popupContent
layer.bindPopup(popupContent);
layer.on('dragend', function(e){
console.log(layer.getLatLng().lat);
console.log(layer.getLatLng().lng);
});
}
var mymarker =L.geoJSON(data, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng,{ draggable: true }, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);

Related

Can't get properties from external geojson to mapbox

I have replicate and adjust this example from mapbox:
https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/
Everything is working fine but I want to have the geojson as an external file.
So I change this code:
var places = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'icon': 'theatre'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.038659, 38.931567]
}
},
]
};
with this:
var places = '../images/destinations.geojson';
and I get this error in DevTools: Uncaught TypeError: Cannot read property 'forEach' of undefined.
The rest of the code (that I get the error) is this:
map.on('load', function() {
// Add a GeoJSON source containing place coordinates and information.
map.addSource('places', {
'type': 'geojson',
'data': places
});
places.features.forEach(function(feature) {
var symbol = feature.properties['icon'];
var layerID = 'poi-' + symbol;
// Add a layer for this symbol type if it hasn't been added already.
if (!map.getLayer(layerID)) {
map.addLayer({
'id': layerID,
'type': 'symbol',
'source': 'places',
'layout': {
'icon-image': symbol + '-15',
'icon-allow-overlap': true
},
'filter': ['==', 'icon', symbol]
});

One way to load an external geoJSON file would be to use d3js. See the example below, which is taken from this mapbox example. This example will draw a line for the coordinates given in the geoJSON file.
You should be able to iterate over data.features with your forEach loop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Load from an external geoJSON</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
mapboxgl.accessToken = '<access_token>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
zoom: 0
});
map.on('load', function() {
// We use D3 to fetch the JSON here so that we can parse and use it separately
// from GL JS's use in the added source. You can use any request method (library
// or otherwise) that you want.
d3.json(
'https://docs.mapbox.com/mapbox-gl-js/assets/hike.geojson', //the geoJSON data file
function(err, data) {
if (err) throw err;
// save full coordinate list for later
var coordinates = data.features[0].geometry.coordinates;
// start by showing just the first coordinate
data.features[0].geometry.coordinates = [coordinates[0]];
// add it to the map
map.addSource('trace', { type: 'geojson', data: data });
map.addLayer({
'id': 'trace',
'type': 'line',
'source': 'trace',
'paint': {
'line-color': 'yellow',
'line-opacity': 0.75,
'line-width': 5
}
});
}
);
});
</script>
</body>
</html>

Cannot click MultiPolygon

I have a strange behavior with the new leaflet version 1.2.0.
With the version 0.7.7 I can click "inside" the feature below but not with 1.2.0.
I tried to subscribe to click / mouseover on each layers but the event raised only on lines not on the whole geometry.
<!DOCTYPE html>
<html>
<head>
<title>GeoJSON tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js"></script>
<style>
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').setView([0, 0], 4);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.light'
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
var demo = {
"type": "Feature",
"properties": {
"popupContent": "This is the Auraria West Campus",
"style": {
weight: 2,
color: "#999",
opacity: 1,
fillColor: "#B0DE5C",
fillOpacity: 0.8
}
},
"geometry": {"type":"MultiPolygon","coordinates":[[[[-0.43002011405222973,-10.2822214314305],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.427219595863601],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-11.797228385639098],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-10.632230577203998],[-6.8524471842921191,-10.632229432794826],[-7.1773201800049975,-10.618045171476471],[-7.4997206960568246,-10.575600338314761],[-7.8171950698496877,-10.505217964118952],[-8.1273271297027563,-10.40743370125471],[-8.4277565833776897,-10.282991747006193],[-8.7161969813277587,-10.132839179785332],[-8.9904531179594898,-9.9581187512932772],[-9.2484377384727328,-9.7601601894899339],[-9.4881874241300075,-9.5404700785612739],[-9.7078775350586426,-9.3007203929039761],[-9.905836096861961,-9.0427357723907136],[-10.080556525353987,-8.7684796357589647],[-10.230709092574816,-8.4800392378088816],[-10.355151046823305,-8.1796097841339339],[-10.452935309687511,-7.8694777242808556],[-10.523317683883288,-7.5520033504879862],[-10.565762517044963,-7.2296028344361538],[-10.57994677836329,-6.9047298387232701],[-10.565762195536575,-6.5798533669543531],[-10.523316435823251,-6.2574494560268477],[-10.452932544044781,-5.9399718472461558],[-10.355146195658687,-5.6298367889758829],[-10.230701619857003,-5.3294046471326233],[-10.080545935410704,-5.0409619409890034],[-9.905821942368668,-4.7667039410064369],[-9.7078594244718417,-4.5087179611413717],[-9.4881650284779653,-4.2689674727834159],[-9.2484107974229453,-4.0492771612305276],[-8.9904214450895239,-3.8513190384328695],[-8.7161604685343921,-3.6765997176981067],[-8.427715204367999,-3.5264489472073421],[-8.1272809425202723,-3.402009489610478],[-7.8171442183987061,-3.304228424725018],[-7.4996654105982934,-3.2338499415315063],[-7.1772607766081107,-3.191409674323971],[-6.8523840632366095,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-10.427219595863601],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.2822214314305]],[[-0.43002011405231944,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.4822017754958985]],[[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-7.8278379817152297,-9.2322016520028001]],[[-10.230018122698469,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.4822017754958985]],[[-6.4300198290674695,-10.2822214314305],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.582221431430501],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.2822214314305]]],[[[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.2822214314305]]],[[[-0.43002011405222973,-10.427219595863601],[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-10.427219595863601],[-0.43002011405222973,-10.427219595863601],[-0.43002011405222973,-10.427219595863601]]],[[[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-10.427219595863601]]],[[[0.83510707489636005,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009],[0.83510707489636005,-4.5272171375912009]]],[[[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009]]],[[[0.55510678301988037,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989],[0.55510678301988037,-2.7472166084602989]]],[[[-0.070001521129099409,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989]]],[[[-0.21526289249859953,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989]]],[[[-0.22301112112909927,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989]]],[[[-6.49701022431766,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989]]],[[[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989]]],[[[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-2.8322306261216994]]],[[[-6.5299710033195995,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983],[-6.5299710033195995,-3.1772306261216983]]],[[[-6.8523840632366095,-3.1772306261216983],[-7.1772607766081107,-3.191409674323971],[-7.1772607766081107,-3.191409674323971],[-6.8523840632366095,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983]]],[[[-7.1772607766081107,-3.191409674323971],[-7.4996654105982934,-3.2338499415315063],[-7.4996654105982934,-3.2338499415315063],[-7.1772607766081107,-3.191409674323971],[-7.1772607766081107,-3.191409674323971]]],[[[-7.4996654105982934,-3.2338499415315063],[-7.8171442183987061,-3.304228424725018],[-7.8171442183987061,-3.304228424725018],[-7.4996654105982934,-3.2338499415315063],[-7.4996654105982934,-3.2338499415315063]]],[[[-7.8171442183987061,-3.304228424725018],[-8.1272809425202723,-3.402009489610478],[-8.1272809425202723,-3.402009489610478],[-7.8171442183987061,-3.304228424725018],[-7.8171442183987061,-3.304228424725018]]],[[[-8.1272809425202723,-3.402009489610478],[-8.427715204367999,-3.5264489472073421],[-8.427715204367999,-3.5264489472073421],[-8.1272809425202723,-3.402009489610478],[-8.1272809425202723,-3.402009489610478]]],[[[-8.427715204367999,-3.5264489472073421],[-8.7161604685343921,-3.6765997176981067],[-8.7161604685343921,-3.6765997176981067],[-8.427715204367999,-3.5264489472073421],[-8.427715204367999,-3.5264489472073421]]],[[[-8.7161604685343921,-3.6765997176981067],[-8.9904214450895239,-3.8513190384328695],[-8.9904214450895239,-3.8513190384328695],[-8.7161604685343921,-3.6765997176981067],[-8.7161604685343921,-3.6765997176981067]]],[[[-8.9904214450895239,-3.8513190384328695],[-9.2484107974229453,-4.0492771612305276],[-9.2484107974229453,-4.0492771612305276],[-8.9904214450895239,-3.8513190384328695],[-8.9904214450895239,-3.8513190384328695]]],[[[-9.2484107974229453,-4.0492771612305276],[-9.4881650284779653,-4.2689674727834159],[-9.4881650284779653,-4.2689674727834159],[-9.2484107974229453,-4.0492771612305276],[-9.2484107974229453,-4.0492771612305276]]],[[[-9.4881650284779653,-4.2689674727834159],[-9.7078594244718417,-4.5087179611413717],[-9.7078594244718417,-4.5087179611413717],[-9.4881650284779653,-4.2689674727834159],[-9.4881650284779653,-4.2689674727834159]]],[[[-9.7078594244718417,-4.5087179611413717],[-9.905821942368668,-4.7667039410064369],[-9.905821942368668,-4.7667039410064369],[-9.7078594244718417,-4.5087179611413717],[-9.7078594244718417,-4.5087179611413717]]],[[[-9.905821942368668,-4.7667039410064369],[-10.080545935410704,-5.0409619409890034],[-10.080545935410704,-5.0409619409890034],[-9.905821942368668,-4.7667039410064369],[-9.905821942368668,-4.7667039410064369]]],[[[-10.080545935410704,-5.0409619409890034],[-10.230701619857003,-5.3294046471326233],[-10.230701619857003,-5.3294046471326233],[-10.080545935410704,-5.0409619409890034],[-10.080545935410704,-5.0409619409890034]]],[[[-10.230701619857003,-5.3294046471326233],[-10.355146195658687,-5.6298367889758829],[-10.355146195658687,-5.6298367889758829],[-10.230701619857003,-5.3294046471326233],[-10.230701619857003,-5.3294046471326233]]],[[[-10.355146195658687,-5.6298367889758829],[-10.452932544044781,-5.9399718472461558],[-10.452932544044781,-5.9399718472461558],[-10.355146195658687,-5.6298367889758829],[-10.355146195658687,-5.6298367889758829]]],[[[-10.452932544044781,-5.9399718472461558],[-10.523316435823251,-6.2574494560268477],[-10.523316435823251,-6.2574494560268477],[-10.452932544044781,-5.9399718472461558],[-10.452932544044781,-5.9399718472461558]]],[[[-10.523316435823251,-6.2574494560268477],[-10.565762195536575,-6.5798533669543531],[-10.565762195536575,-6.5798533669543531],[-10.523316435823251,-6.2574494560268477],[-10.523316435823251,-6.2574494560268477]]],[[[-10.565762195536575,-6.5798533669543531],[-10.57994677836329,-6.9047298387232701],[-10.57994677836329,-6.9047298387232701],[-10.565762195536575,-6.5798533669543531],[-10.565762195536575,-6.5798533669543531]]],[[[-10.57994677836329,-6.9047298387232701],[-10.565762517044963,-7.2296028344361538],[-10.565762517044963,-7.2296028344361538],[-10.57994677836329,-6.9047298387232701],[-10.57994677836329,-6.9047298387232701]]],[[[-10.565762517044963,-7.2296028344361538],[-10.523317683883288,-7.5520033504879862],[-10.523317683883288,-7.5520033504879862],[-10.565762517044963,-7.2296028344361538],[-10.565762517044963,-7.2296028344361538]]],[[[-10.523317683883288,-7.5520033504879862],[-10.452935309687511,-7.8694777242808556],[-10.452935309687511,-7.8694777242808556],[-10.523317683883288,-7.5520033504879862],[-10.523317683883288,-7.5520033504879862]]],[[[-10.452935309687511,-7.8694777242808556],[-10.355151046823305,-8.1796097841339339],[-10.355151046823305,-8.1796097841339339],[-10.452935309687511,-7.8694777242808556],[-10.452935309687511,-7.8694777242808556]]],[[[-10.355151046823305,-8.1796097841339339],[-10.230709092574816,-8.4800392378088816],[-10.230709092574816,-8.4800392378088816],[-10.355151046823305,-8.1796097841339339],[-10.355151046823305,-8.1796097841339339]]],[[[-10.230709092574816,-8.4800392378088816],[-10.080556525353987,-8.7684796357589647],[-10.080556525353987,-8.7684796357589647],[-10.230709092574816,-8.4800392378088816],[-10.230709092574816,-8.4800392378088816]]],[[[-10.080556525353987,-8.7684796357589647],[-9.905836096861961,-9.0427357723907136],[-9.905836096861961,-9.0427357723907136],[-10.080556525353987,-8.7684796357589647],[-10.080556525353987,-8.7684796357589647]]],[[[-9.905836096861961,-9.0427357723907136],[-9.7078775350586426,-9.3007203929039761],[-9.7078775350586426,-9.3007203929039761],[-9.905836096861961,-9.0427357723907136],[-9.905836096861961,-9.0427357723907136]]],[[[-9.7078775350586426,-9.3007203929039761],[-9.4881874241300075,-9.5404700785612739],[-9.4881874241300075,-9.5404700785612739],[-9.7078775350586426,-9.3007203929039761],[-9.7078775350586426,-9.3007203929039761]]],[[[-9.4881874241300075,-9.5404700785612739],[-9.2484377384727328,-9.7601601894899339],[-9.2484377384727328,-9.7601601894899339],[-9.4881874241300075,-9.5404700785612739],[-9.4881874241300075,-9.5404700785612739]]],[[[-9.2484377384727328,-9.7601601894899339],[-8.9904531179594898,-9.9581187512932772],[-8.9904531179594898,-9.9581187512932772],[-9.2484377384727328,-9.7601601894899339],[-9.2484377384727328,-9.7601601894899339]]],[[[-8.9904531179594898,-9.9581187512932772],[-8.7161969813277587,-10.132839179785332],[-8.7161969813277587,-10.132839179785332],[-8.9904531179594898,-9.9581187512932772],[-8.9904531179594898,-9.9581187512932772]]],[[[-8.7161969813277587,-10.132839179785332],[-8.4277565833776897,-10.282991747006193],[-8.4277565833776897,-10.282991747006193],[-8.7161969813277587,-10.132839179785332],[-8.7161969813277587,-10.132839179785332]]],[[[-8.4277565833776897,-10.282991747006193],[-8.1273271297027563,-10.40743370125471],[-8.1273271297027563,-10.40743370125471],[-8.4277565833776897,-10.282991747006193],[-8.4277565833776897,-10.282991747006193]]],[[[-8.1273271297027563,-10.40743370125471],[-7.8171950698496877,-10.505217964118952],[-7.8171950698496877,-10.505217964118952],[-8.1273271297027563,-10.40743370125471],[-8.1273271297027563,-10.40743370125471]]],[[[-7.8171950698496877,-10.505217964118952],[-7.4997206960568246,-10.575600338314761],[-7.4997206960568246,-10.575600338314761],[-7.8171950698496877,-10.505217964118952],[-7.8171950698496877,-10.505217964118952]]],[[[-7.4997206960568246,-10.575600338314761],[-7.1773201800049975,-10.618045171476471],[-7.1773201800049975,-10.618045171476471],[-7.4997206960568246,-10.575600338314761],[-7.4997206960568246,-10.575600338314761]]],[[[-7.1773201800049975,-10.618045171476471],[-6.8524471842921191,-10.632229432794826],[-6.8524471842921191,-10.632229432794826],[-7.1773201800049975,-10.618045171476471],[-7.1773201800049975,-10.618045171476471]]],[[[-6.8524471842921191,-10.632229432794826],[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-10.632230577203998],[-6.8524471842921191,-10.632229432794826],[-6.8524471842921191,-10.632229432794826]]],[[[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-10.632230577203998]]],[[[-6.2149487404503194,-11.797228385639098],[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-11.797228385639098],[-6.2149487404503194,-11.797228385639098],[-6.2149487404503194,-11.797228385639098]]],[[[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-11.797228385639098]]],[[[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.697228440261199]]],[[[-3.7949483976304998,-10.427219595863601],[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.427219595863601],[-3.7949483976304998,-10.427219595863601],[-3.7949483976304998,-10.427219595863601]]],[[[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.427219595863601]]],[[[-0.73002011405222955,-10.2822214314305],[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.2822214314305],[-0.73002011405222955,-10.2822214314305],[-0.73002011405222955,-10.2822214314305]]],[[[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985]]],[[[-0.43002011405231944,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992],[-0.43002011405231944,-6.7822017754958992]]],[[[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992]]],[[[-0.73002011405231926,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985],[-0.73002011405231926,-6.4822017754958985]]],[[[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-8.0399700160711998,-9.4443336863587],[-7.8278379817152297,-9.2322016520028001],[-7.8278379817152297,-9.2322016520028001]]],[[[-8.0399700160711998,-9.4443336863587],[-8.2521020504271601,-9.2322016520028001],[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-8.0399700160711998,-9.4443336863587]]],[[[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-8.0399700160711891,-9.0200696176468007],[-8.2521020504271601,-9.2322016520028001],[-8.2521020504271601,-9.2322016520028001]]],[[[-8.0399700160711891,-9.0200696176468007],[-7.8278379817152297,-9.2322016520028001],[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-8.0399700160711891,-9.0200696176468007]]],[[[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985]]],[[[-10.230018122698469,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992],[-10.230018122698469,-6.7822017754958992]]],[[[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992]]],[[[-10.530018122698468,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985],[-10.530018122698468,-6.4822017754958985]]],[[[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.2822214314305]]],[[[-6.4300198290674695,-10.582221431430501],[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.582221431430501],[-6.4300198290674695,-10.582221431430501],[-6.4300198290674695,-10.582221431430501]]],[[[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.582221431430501]]],[[[-6.7300198290674693,-10.2822214314305],[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.2822214314305],[-6.7300198290674693,-10.2822214314305],[-6.7300198290674693,-10.2822214314305]]],[[[-0.43002011405222973,-10.2822214314305],[-0.43002011405222973,-10.427219595863601],[0.83510707489636005,-10.427219595863601],[0.83510707489636005,-4.5272171375912009],[0.55510678301988037,-4.5272171375912009],[0.55510678301988037,-2.7472166084602989],[-0.070001521129099409,-2.7472166084602989],[-0.21526289249859953,-2.7472166084602989],[-0.22301112112909927,-2.7472166084602989],[-6.49701022431766,-2.7472166084602989],[-6.5299710033195995,-2.7472166084602989],[-6.5299710033195995,-2.8322306261216994],[-6.5299710033195995,-3.1772306261216983],[-6.8523840632366095,-3.1772306261216983],[-7.1772607766081107,-3.191409674323971],[-7.4996654105982934,-3.2338499415315063],[-7.8171442183987061,-3.304228424725018],[-8.1272809425202723,-3.402009489610478],[-8.427715204367999,-3.5264489472073421],[-8.7161604685343921,-3.6765997176981067],[-8.9904214450895239,-3.8513190384328695],[-9.2484107974229453,-4.0492771612305276],[-9.4881650284779653,-4.2689674727834159],[-9.7078594244718417,-4.5087179611413717],[-9.905821942368668,-4.7667039410064369],[-10.080545935410704,-5.0409619409890034],[-10.230701619857003,-5.3294046471326233],[-10.355146195658687,-5.6298367889758829],[-10.452932544044781,-5.9399718472461558],[-10.523316435823251,-6.2574494560268477],[-10.565762195536575,-6.5798533669543531],[-10.57994677836329,-6.9047298387232701],[-10.565762517044963,-7.2296028344361538],[-10.523317683883288,-7.5520033504879862],[-10.452935309687511,-7.8694777242808556],[-10.355151046823305,-8.1796097841339339],[-10.230709092574816,-8.4800392378088816],[-10.080556525353987,-8.7684796357589647],[-9.905836096861961,-9.0427357723907136],[-9.7078775350586426,-9.3007203929039761],[-9.4881874241300075,-9.5404700785612739],[-9.2484377384727328,-9.7601601894899339],[-8.9904531179594898,-9.9581187512932772],[-8.7161969813277587,-10.132839179785332],[-8.4277565833776897,-10.282991747006193],[-8.1273271297027563,-10.40743370125471],[-7.8171950698496877,-10.505217964118952],[-7.4997206960568246,-10.575600338314761],[-7.1773201800049975,-10.618045171476471],[-6.8524471842921191,-10.632229432794826],[-6.2149487404503194,-10.632230577203998],[-6.2149487404503194,-11.797228385639098],[-3.7949483976304998,-11.797228385639098],[-3.7949483976304998,-10.697228440261199],[-3.7949483976304998,-10.427219595863601],[-0.73002011405222955,-10.427219595863601],[-0.73002011405222955,-10.2822214314305],[-0.43002011405222973,-10.2822214314305]],[[-0.43002011405231944,-6.4822017754958985],[-0.43002011405231944,-6.7822017754958992],[-0.73002011405231926,-6.7822017754958992],[-0.73002011405231926,-6.4822017754958985],[-0.43002011405231944,-6.4822017754958985]],[[-7.8278379817152297,-9.2322016520028001],[-8.0399700160711998,-9.4443336863587],[-8.2521020504271601,-9.2322016520028001],[-8.0399700160711891,-9.0200696176468007],[-7.8278379817152297,-9.2322016520028001]],[[-10.230018122698469,-6.4822017754958985],[-10.230018122698469,-6.7822017754958992],[-10.530018122698468,-6.7822017754958992],[-10.530018122698468,-6.4822017754958985],[-10.230018122698469,-6.4822017754958985]],[[-6.4300198290674695,-10.2822214314305],[-6.4300198290674695,-10.582221431430501],[-6.7300198290674693,-10.582221431430501],[-6.7300198290674693,-10.2822214314305],[-6.4300198290674695,-10.2822214314305]]]]}};
L.geoJson(demo, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
</script>
</body>
</html>
Can you help me ?
I dont know what to add to this post to allow stackoverflow to publish this post lol

Mapbox set icon for featureLayer

I am having some problems with setting an icon for a feature layer. I keep getting layer.setIcon is not a function and similar errors. How can I change the icon style for this layer?
var layer = L.mapbox.featureLayer()
.loadURL(attrs.geoJsonSource)
.addTo(map);
layer.on('ready', function() {
this.eachLayer(function(layer){
layer.setIcon(L.mapbox.marker.icon({
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}))
});
map.fitBounds(featureLayer.getBounds());
});

You can take a look at https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/ and http://leafletjs.com/examples/custom-icons/ to get more information, but apparently you may fit your need:
using your own icon style. (FIRST)
and/or
using geoJSON file icon style. (SECOND)
The code:
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9);
var layer = L.mapbox.featureLayer().addTo(map);
layer.on('layeradd', function(e) {
var marker = e.layer,feature = marker.feature;
// TWO POSSIBILITIES
// FIRST // your own method to define how icon will be rendered
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}));
// SECOND // use json directly to define how icon will be rendered
//marker.setIcon(L.mapbox.marker.icon(feature.properties.icon));
});
layer.setGeoJSON(geoJson);
assuming the geoJSON file look like this:
var geoJson = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-75.00, 40]
},
"properties": {
"title": "Small astronaut",
"icon": {
'marker-color': '#0034bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.00, 40]
},
"properties": {
"title": "Big astronaut",
"icon": {
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}
}
}];

I am not sure why, but none of the proposed solutions work for me. Instead I have to iterate through the layers of the layer.
layer.on('layeradd', function(e) {
var marker = e.layer, feature = marker.feature;
e.layer.getLayers().forEach(function(marker) {
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}));
})
});

You can use the simple style spec to style the geojson. Looks like this needs to happen before you add it to the feature layer. You could try running eachLayer instead of the for loop, then adding that layer to another feature layer, once the geojson has the style/icons you want. This is modified from the original example. Or you could just use the Leaflet pointToLayer function as shown below.
var key = 'your key here'
L.mapbox.accessToken = key;
var map = L.mapbox.map('map')
.setView([37.8, -96], 3);
var geojson = [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-77.031952, 38.913184]
},
properties: {
title: 'Title'
}
}
];
//Option A - set the properties of the geojson using the simple style spec supported in mapbox.js for mapbox feature layers
/*for(i = 0; i < geojson.length; i++) {
geojson[i].properties['marker-color'] = '#63b6e5';
geojson[i].properties['marker-size'] = 'large';
geojson[i].properties['marker-symbol'] = 'rocket';
}*/
//Option B - use the native leaflet function for points - very simple and extendable to other icon plugins
var features = L.geoJson(geojson, {
pointToLayer: function(feature, latlng){
return new L.marker(latlng, {
icon: L.mapbox.marker.icon({
'marker-color': '#00f',
'marker-symbol': 'star'
})
})
}
}).addTo(map);
body { margin:0; padding:0; }
.map { position:absolute; top:0; bottom:0; width:100%; }
<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<div id='map' class='map'></div>

How can I display my high-chart correctly and import data?

On my highchart how can I set the Y AXIS (dataItem) so that it will populate accordingly to amount of times a country appears in my json data. So in my snippet it should show GB as 66% instead of two 33%?
Also what would be a good way to import my json data if I was to keep in in a separate file. Was thinking of keeping it in a separate file called (json_data.json).
Please help.
$(document).ready(function () {
var json=
[
{
"Hot": false,
"Country": "NETHERLANDS",
"DomCountry": "NA",
"DomPortCode": "*PI",
"Code": "RTM",
"Origin": "NL",
"CodeDest": "NA",
},
{
"Hot": true,
"Country": "GREAT BRITAIN",
"DomCountry": "POLAND",
"DomPortCode": "*PI",
"Code": "CAL",
"Origin": "GB",
"CodeDest": "PL",
},
{
"Hot": true,
"Country": "GREAT BRITAIN",
"DomCountry": "POLAND",
"DomPortCode": "*PI",
"Code": "CAL",
"Origin": "GB",
"CodeDest": "PL",
}
];
var listData=json;
console.log(listData);
var dataList = []
var dataItem;
for (var i = 0; i < listData.length; i++) {
dataItem={
name: listData[i].Country,
y: 1
}
dataList.push(dataItem); //dataItem push
}
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'SHIPPING INFO'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: "Try",
colorByPoint: true,
data: dataList
}]
});
});
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<title>Highcharts Examples</title>
</head>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

You need to loop through your data and count the occurrences.
Then you need to calculate the percentages, and format the data in a way that Highcharts can use.
You can loop through it and build your first set up something like this:
var countryCounts = {};
var countryNames = [];
var totalCount = 0;
//loop through the object
$.each(json, function(i, node) {
//get the country name
var countryName = node["Country"];
//build array of unique country names
if($.inArray(countryName, countryNames) == -1) {
countryNames.push(countryName);
}
//add or increment a count for the country name
if(typeof countryCounts[countryName] == 'undefined') {
countryCounts[countryName] = 1;
}
else {
countryCounts[countryName]++;
}
//increment the total count so we can calculate %
totalCount++;
});
That gives you what you need to calculate from.
Then you can loop through your country names and build a data array:
var data = [];
//loop through unique countries to build data for chart
$.each(countryNames, function(i, countryName) {
data.push({
name: countryName,
y: Math.round((countryCounts[countryName] / totalCount) * 100)
});
});
This keeps it dynamic so that you can have any number of countries.
Then you just add your data array to your chart:
http://jsfiddle.net/jlbriggs/e2qq2j2L/

Binding Custom Markers with base layer : leaflet

Working with leaflet api where i have added a custom marker control...
There also we can add multiple baseLayer and toggle between these layers....
Lately i was trying to bind the markers with this base layer and i can't understand the documentaion very well so having difficulty if someone help.....
Script
//Custom control for marker
L.easyButton('fa-arrow', function () {
map.on('click', function arrow(e) {
L.marker(e.latlng, { icon: arrIcon, draggable: true}).addTo(map);
map.off('click', arrow);
});
}).addTo(map);
//already added layer and needs to bind marker with this
var layerGroup = new L.LayerGroup(),
imageOverlayUrl = 'abc.jpg',
imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
featureGroup = new L.FeatureGroup().addTo(layerGroup);
var layerGroupings = { "Main": layerGroup };
var layerControl = new L.control.layers(layerGroupings,null, { collapsed: false }).addTo(map);
In short, i have a need to bind my custom marker with this layer i have defined in script, if there is a way please guide or give reference..thanks for your time

I am not sure if this is what you are looking for.
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive_dev_mapped.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MixedMOverlaysMarkersNestedNoWatchController', function ($scope, leafletData, $timeout) {
var _clonedMarkers;
$timeout(function () {
//should do nothing (not watched) and only see one destroy
_clonedMarkers = angular.extend({},$scope.markers);
$scope.markers = {};
},1000);
$timeout(function () {
leafletData.getDirectiveControls().then(function (controls) {
//move all markers by a few decimal points
for (var layer in _clonedMarkers) {
var markerSet = _clonedMarkers[layer];
for (var markerName in markerSet) {
var marker = markerSet[markerName];
marker.lat += .05;
}
}
//force manual update
$scope.markers = _clonedMarkers;
controls.markers.create($scope.markers);
});
}, 4000);
angular.extend($scope, {
markersWatchOptions: {
doWatch: false,
isDeep: false,
individual: {
doWatch: false,
isDeep: false
}
},
center: {
lat: 42.20133,
lng: 2.19110,
zoom: 11
},
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
type: 'xyz',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '© OpenStreetMap contributors',
continuousWorld: true
}
},
cycle: {
name: 'OpenCycleMap',
type: 'xyz',
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '© OpenCycleMap contributors - © OpenStreetMap contributors',
continuousWorld: true
}
}
},
overlays: {
hillshade: {
name: 'Hillshade Europa',
type: 'wms',
url: 'http://129.206.228.72/cached/hillshade',
visible: true,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
crs: L.CRS.EPSG900913
}
},
fire: {
name: 'OpenFireMap',
type: 'xyz',
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
layerOptions: {
attribution: '© OpenFireMap contributors - © OpenStreetMap contributors',
continuousWorld: true
}
},
cars: {
name: 'Cars',
type: 'group',
visible: true
},
bikes: {
name: 'Bicycles',
type: 'group',
visible: false
},
runners: {
name: 'Runners',
type: 'group',
visible: false
}
}
},
markers: {
cars: {
m1: {
lat: 42.20133,
lng: 2.19110,
message: "I'm a car"
},
m2: {
lat: 42.21133,
lng: 2.18110,
message: "I'm a car"
}
},
bikes: {
m3: {
lat: 42.19133,
lng: 2.18110,
layer: 'bikes',
message: 'A bike!!'
},
m4: {
lat: 42.3,
lng: 2.16110,
layer: 'bikes'
}
},
runners: {
m5: {
lat: 42.1,
lng: 2.16910
},
m6: {
lat: 42.15,
lng: 2.17110
}
}
}
});
});
</script>
</head>
<body ng-controller="MixedMOverlaysMarkersNestedNoWatchController">
<leaflet
center="center"
markers="markers"
layers="layers"
markers-nested="true"
markers-watch-options="markersWatchOptions"
height="480px" width="100%">
</leaflet>
<h1>Overlays with nested markers no watchers example</h1>
</body>
</html>
*Source: https://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/mixed/overlays-markers-nested-no-watch-example