highlight feature with click in mapbox gl

highlight feature with click in mapbox gl - javascript

I have a geojson layer of streets that are highlighted when moused-over.
My objective is now to highlight individual streets red with a click event. Only one street should be able to be highlighted at a time, and should remain highlighted until a different street is clicked.
Any idea as to what needs to be added to the following code?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.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>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-opacity": 0.0,
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#f48024",
"line-opacity": 0.9,
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
map.addLayer({
"id" : "street_toggle",
"source": "streets",
"type": "line",
"layout": {"line-join": "round",
"line-cap": "round"},
"paint": {
"line-color": "#FF0000",
"line-opacity": 0.9,
"line-width:": 3.5
}
});
map.on('mousemove', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter('route-hover', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('route-hover', ['==', 'rd_name', '']);
}
});
});
map.on('click', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["street_toggle"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('street_toggle', ['==', 'rd_name', '']);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.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>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537, ],
zoom: 13
});
map.on('style.load', function() {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-opacity": 0.0,
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#f48024",
"line-opacity": 0.9,
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
map.addLayer({
"id": "street_toggle",
"source": "streets",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#FF0000",
"line-opacity": 0.9,
"line-width:": 3.5
}
});
map.on('mousemove', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function(err, features) {
if (!err && features.length) {
map.setFilter('route-hover', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('route-hover', ['==', 'rd_name', '']);
}
});
});
map.on('click', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["street_toggle"]
}, function(err, features) {
if (!err && features.length) {
map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('street_toggle', ['==', 'rd_name', '']);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>
If you take a look at the console output when running your code, you should see this error message:
layers.street_toggle.paint.line-width:: unknown property "line-width:"
Because of this error, the street_toggle layer is not being added to the map and the click interaction is not working.
To fix the problem, please change the "line-width:" key to "line-width"(remove the spurious colon inside the quotes)

#Lucas features At() must be a depreciated method? His colon did throw a bug, but it doesn't help him select a road segment, at least at v0.16, right? I use queryRenderedFeatures()
note: I really wish this method had a optional radius parameter - you really have to click precisely on the line.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.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>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "red",
// "line-opacity": 0.0,
"line-width": 2.5
}
});
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['m_streets'] });
if (!features.length) {
return;
}
if (typeof map.getLayer('selectedRoad') !== "undefined" ){
map.removeLayer('selectedRoad')
map.removeSource('selectedRoad');
}
var feature = features[0];
//I think you could add the vector tile feature to the map, but I'm more familiar with JSON
console.log(feature.toJSON());
map.addSource('selectedRoad', {
"type":"geojson",
"data": feature.toJSON()
});
map.addLayer({
"id": "selectedRoad",
"type": "line",
"source": "selectedRoad",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "yellow",
"line-width": 8
}
});
});
});
</script>
</body>
</html>

Related

Saving a div contains a geomap as an Image

I want to save the showing map in my div as an image. I tried the following code but it does not show the map content but just the map contollers.
I used the snippet but Actually I don't know why it doesn't show the appened picture on the snippet. it shows the appened picture (without map content) for me.
$(function () {
var map = L.map('map').setView([10.505, 20], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
map.zoomControl.setPosition('bottomright');
});
$("#geo-btn").on("click", function (e) {
var container = L.DomUtil.get('map');
if (container != null) {
container._leaflet_id = null;
}
var map = L.map('map').setView([10.505, 20], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
var states = JSON.parse(`[{
"type": "Feature",
"properties": { "party": "Republican" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": { "party": "Democrat" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}]`);
L.geoJSON(states, {
style: function (feature) {
switch (feature.properties.party) {
case 'Republican': return { color: "#ff0000" };
case 'Democrat': return { color: "#0000ff" };
}
}
}).addTo(map);
});
$("#img-save").on("click", function () {
html2canvas(document.getElementById("map")).then(canvas => {
document.body.appendChild(canvas);
});
});
#map {
height: 500px;
border: red solid 1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<title>Geo</title>
</head>
<body>
<body>
<button id="geo-btn"> Click to Show</button>
<button id="img-save">Show Image</button>
<div id="map"></div>
<div id="result-img"></div>
</body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>

I think this should work for you
$(function() {
const map = L.map('map').setView([10.505, 20], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
map.zoomControl.setPosition('bottomright');
});
$("#geo-btn").on("click", function(e) {
const container = L.DomUtil.get('map');
if (container != null) {
container._leaflet_id = null;
}
const map = L.map('map').setView([10.505, 20], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
const states = JSON.parse(`[{
"type": "Feature",
"properties": { "party": "Republican" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": { "party": "Democrat" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}]`);
L.geoJSON(states, {
style: function(feature) {
switch (feature.properties.party) {
case 'Republican':
return {
color: "#ff0000"
};
case 'Democrat':
return {
color: "#0000ff"
};
}
}
}).addTo(map);
});
$("#img-save").on("click", function() {
const clone = document.getElementById("map").cloneNode(true);
document.getElementById('foo').appendChild(clone);
});
#map {
height: 500px;
border: red solid 1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<title>Geo</title>
</head>
<body>
<button id="geo-btn"> Click to Show</button>
<button id="img-save">Show Image</button>
<div id="map"></div>
<div id="result-img"></div>
</body>
<div id="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>
you just need these lines:
const clone = document.getElementById("map").cloneNode(true);
document.getElementById('foo').appendChild(clone);
I hope this helps

Check out: https://jsfiddle.net/PatrickHume/1rscqwkL/1/, as the image download doesn't work in SO's code runner, click the 'Click to Show' first then click 'Show Image' and it will download the image
it uses: https://github.com/tsayen/dom-to-image
and https://github.com/eligrey/FileSaver.js/
$(function() {
const map = L.map('map').setView([10.505, 20], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
map.zoomControl.setPosition('bottomright');
});
$("#geo-btn").on("click", function(e) {
const container = L.DomUtil.get('map');
if (container != null) {
container._leaflet_id = null;
}
const map = L.map('map').setView([10.505, 20], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
const states = JSON.parse(`[{
"type": "Feature",
"properties": { "party": "Republican" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": { "party": "Democrat" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}]`);
L.geoJSON(states, {
style: function(feature) {
switch (feature.properties.party) {
case 'Republican':
return {
color: "#ff0000"
};
case 'Democrat':
return {
color: "#0000ff"
};
}
}
}).addTo(map);
$("#img-save").on("click", function() {
const clone = document.getElementById("map").cloneNode(true);
document.getElementById('foo').appendChild(clone);
domtoimage.toBlob(document.getElementById('foo'))
.then(function(blob) {
window.saveAs(blob, 'my-node.png');
});
});
});
#map {
height: 500px;
border: red solid 1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<title>Geo</title>
</head>
<body>
<button id="geo-btn"> Click to Show</button>
<button id="img-save">Show Image</button>
<div id="map"></div>
<div id="result-img"></div>
</body>
<div id="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
</html>
Hope this helps

Multiple Leaflet maps

I have this webpage that I am developing which involves multiple Leaflet maps on the webpage using jQuery from top to bottom. See this lo-fi wireframe for a closer look . I have tried to add multiple <div>s in index.html and multiple map variables in main.js (and yes, styled in CSS), as well as
creating a function like kboul's answer here on StackOverflow but no matter what I do, it ends up just being one map that does not load the base map. For now, I have included the code that works with only one map See this image of what the code looks like with all the layers on and working. Also please note the coordinates have been redacted because there were so many.
Here is my code:
/*Stylesheet by Will P. Campbell,2021*/
//map to contain '31500' polygon
var map = L.map('mapid').setView([45.5, -89.5], 7);
//map to contain '27500' polygon
var map2 = L.map('mapid2').setView([45.5, -89.5], 7);
//map to contain '24000' polygon
var map3 = L.map('mapid3').setView([45.5, -89.5], 7);
//map to contain '20500' polygon
var map4 = L.map('mapid4').setView([45.5, -89.5], 7);
//map to contain '17000' polygon
var map5 = L.map('mapid5').setView([45.5, -89.5], 7);
//map to contain '14600' polygon
var map6 = L.map('mapid6').setView([45.5, -89.5], 7);
//map to contain '11000' polygon
var map7 = L.map('mapid7').setView([45.5, -89.5], 7);
var baseMap = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
}).addTo(map);
/*Glacier 11000*/
var Toe_11000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 11000,
"SHAPE_Leng": 387749.141631,
"Shape_Le_1": 5.06435076694,
"Shape_Area": 0.429078160361,
"filename": "11000.jpg"
}
}]
};
var g11000 = L.geoJSON(Toe_11000, {
style: {
color: "#e41a1c"
}
});
g11000.on({
click: function() {
$("#panel").html(Toe_11000.features[0].properties.Years_Ago + " Years Ago" + info11000 + glacierInfo + selfPlug);
}
});
/*Glacier 14600*/
var Toe_14600 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-90.65116417499996, 47.70293454200004],
[-90.72482365299999, 47.673924999000064],
[-90.79822703099995, 47.63344243800003],
[-90.87151684099996, 47.592913355000064],
[-90.93607653299995, 47.54240954900007],
[-90.98389479799994, 47.50486972300007],
[-91.01266156999998, 47.46605101600005],
[-91.03524057399994, 47.43585163000006],
[-91.09569047499997, 47.40672034700003],
[-91.16068607799997, 47.39608128700007],
[-91.20242634199997, 47.38136616700007],
[-91.24370674999994, 47.34807033200008],
[-91.24727017899994, 47.32089010200008],
[-91.27829107399998, 47.30054916700004],
[-91.35252049299999, 47.24684182500005],
[-91.42454322999998, 47.19454164700005],
[-91.49851758599999, 47.142169952000074],
[-91.58297018999997, 47.09531966900005],
[-91.69593298799998, 47.02941600500003],
[-91.78970295499994, 46.95941544900006],
[-91.82835428899995, 46.930232197000066],
[-91.91162510599997, 46.86744039100006],
[-91.99554737199998, 46.82743409100004],
[-92.06911560299994, 46.79183942000003],
[-92.12271105199994, 46.779428163000034],
[-92.18228311199994, 46.76116312500005],
[-92.25397574199997, 46.73548525600006],
[-92.32346255299996, 46.70837829200008],
[-92.37452539699996, 46.68875637000008],
[-92.41380912499994, 46.68507654200005],
[-92.47155654999995, 46.67669948400004],
[-92.49779041299996, 46.66041357700004],
[-92.53630909799995, 46.640992280000034],
[-92.60352557599998, 46.61519304900003],
[-92.65025475699997, 46.595545755000046],
[-92.66997578199994, 46.57508444400003],
[-92.69410222099998, 46.56023089900003],
[-92.73425967299994, 46.53498854400004],
[-92.79268852199999, 46.503571829000066],
[-92.84256524699998, 46.468051606000074],
[-92.88183268599994, 46.42849094400003],
[-92.92753540999996, 46.394466917000045],
[-92.94989701799994, 46.34959887800005],
[-92.95186608799997, 46.30954130100008],
[-92.92975250899997, 46.28153421700006],
[-92.85925850399997, 46.27331860700008],
[-92.79127616799997, 46.27357100900008],
[-92.71321257399995, 46.27830917600005],
[-92.63952461199995, 46.28860811000004],
[-92.57829646799996, 46.301436514000045],
[-92.50925582199994, 46.32440533500005],
[-92.44221727099995, 46.347289440000054],
[-92.41261793199999, 46.37792243000007],
[-92.37035638299994, 46.40309578500006],
[-92.32010085699994, 46.43555965100006],
[-92.22421472899998, 46.46604055800003],
[-92.16676037899998, 46.47714513900007],
[-92.07164040799995, 46.47747958900004],
[-91.96355058399996, 46.462242262000075],
[-91.88129117799997, 46.47505522800003],
[-91.84860834599993, 46.487018110000065],
[-91.75759648199994, 46.48702458100007],
[-91.67480884399998, 46.485409692000076],
[-91.61092690599997, 46.49347106100004],
[-91.53298945499995, 46.517401738000046],
[-91.46184380399995, 46.56548027200006],
[-91.39439978099995, 46.60108704600003],
[-91.31293960199997, 46.66110276500007],
[-91.18166198599994, 46.731109263000064],
[-91.12163612599994, 46.77552488500004],
[-91.02482937399998, 46.78786178000007],
[-90.98063779999995, 46.797773128000074],
[-90.96927097899999, 46.782631328000036],
[-90.95760682899999, 46.75034730400006],
[-91.00666688699994, 46.706114670000034],
[-91.04472870499995, 46.66958103600007],
[-91.09664029099997, 46.636712301000045],
[-91.13687825499994, 46.57726777900007],
[-91.18839689999999, 46.532931133000034],
[-91.22591702999995, 46.48300696300004],
[-91.22480609399997, 46.433490293000034],
[-91.18738430599996, 46.359591409000075],
[-91.12616009499999, 46.325921202000075],
[-90.99618142799994, 46.285217860000046],
[-90.89141040599998, 46.26322281700004],
[-90.77320977799997, 46.256463342000075],
[-90.59165834999999, 46.22897204100008],
[-90.47359851299996, 46.22571206300006],
[-90.21011180299996, 46.22840493600006],
[-90.07834092799999, 46.21714115300006],
[-89.99052527699996, 46.20002253800004],
[-89.63663278999996, 46.19754044900003],
[-89.30472963899996, 46.19409865700004],
[-89.14564109599996, 46.193020372000035],
[-89.10690236799996, 46.21367948200003],
[-88.97509624199995, 46.21828879600008],
[-88.74396655199996, 46.24455812300005],
[-88.43920812199997, 46.263282384000036],
[-88.18463496799995, 46.27857294900008],
[-88.00977466999996, 46.175646776000065],
[-87.99389010599998, 46.04677587200007],
[-88.03142757799998, 45.90454467200004],
[-88.07824403599994, 45.733876871000064],
[-88.11693049199994, 45.64521481500003],
[-88.15630836499997, 45.53154329200004],
[-88.25459067099996, 45.31159869500004],
[-88.32963412999999, 45.169820886000025],
[-88.40834291299996, 45.06376788400007],
[-88.48581727299995, 44.99336901300006],
[-88.79481685399998, 44.90415892300007],
[-88.88639060299994, 44.84792515000004],
[-88.88261184299995, 44.78357859500005],
[-88.94319230899998, 44.76271860500003],
[-88.97231671099996, 44.62840776200005],
[-89.00318747399996, 44.57866096200007],
[-89.02004076199995, 44.46804576400007],
[-89.04649611099995, 44.37537170000007],
[-89.10740785599995, 44.30082986600007],
[-89.08883401599996, 44.21492877800006],
[-89.02088686299999, 44.117891385000064],
[-88.83475711099999, 43.998228366000035],
[-88.68786675299998, 43.92517043600003],
[-88.62533997199995, 43.84939582800007],
[-88.57299960499995, 43.76656712400006],
[-88.46045322499998, 43.73294585800005],
[-88.39507582999994, 43.78207346700003],
[-88.33422715399996, 43.841949181000075],
[-88.26389529699998, 43.883781630000044],
[-88.26171217099994, 43.95878690500007],
[-88.25436012199998, 44.04085874400005],
[-88.13665456199999, 44.003267237000045],
[-88.04759712699996, 44.00177966800004],
[-87.97724235799996, 44.03271403600007],
[-87.91264601899996, 44.03869804900006],
[-87.85100620199995, 43.96251794800003],
[-87.84031258699997, 43.84797273600003],
[-87.77934997599993, 43.76104507100007],
[-87.69970123099995, 43.65226923900008],
[-87.59451333699997, 43.57506238600007],
[-87.41895871099996, 43.54264457600004],
[-87.19847646199997, 43.53030423300004],
[-87.05535483399996, 43.54457143500008],
[-86.90199607799997, 43.56552812900003],
[-86.73246550099998, 43.61082922300005],
[-86.59688342599998, 43.66046715300007],
[-86.47311237099996, 43.75675903800004],
[-86.41494068499998, 43.905016706000026],
[-86.38487126299998, 43.99339418100004],
[-86.33611529199999, 44.14190469500005],
[-86.23094835399996, 44.23494796600005],
[-86.07578505799995, 44.32618325100003],
[-85.99546925899995, 44.409139733000075],
[-85.93780993299998, 44.44997420000004],
[-85.94529025199995, 44.48596854700003],
[-85.88575853799995, 44.551719080000055],
[-85.82903334099996, 44.64612264200008],
[-85.67299230199995, 44.65817042300006],
[-85.49721378799995, 44.66565292100006],
[-85.37988257999996, 44.69311130300008],
[-85.26070073999995, 44.74180747400004],
[-85.20102381099997, 44.79647274300004],
[-85.12731019099994, 44.896951657000045],
[-85.07522771199996, 44.976883351000026],
[-84.82164997499996, 47.579520486000035],
[-90.67336377599997, 47.71242423500007],
[-90.65116417499996, 47.70293454200004]
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 14600,
"SHAPE_Leng": 2202706.20984,
"Shape_Le_1": 25.0028099606,
"Shape_Area": 17.1995913109,
"filename": "14600.jpg"
}
}]
}
var g14600 = L.geoJSON(Toe_14600, {
style: {
color: "blue"
}
});
g14600.on({
click: function() {
$("#panel").html(Toe_14600.features[0].properties.Years_Ago + " Years Ago" + info14600 + glacierInfo + selfPlug);
}
});
/*Glacier 17000*/
var Toe_17000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 2,
"Years_Ago": 17000,
"SHAPE_Leng": 2261336.18634,
"Shape_Le_1": 24.4337768448,
"Shape_Area": 21.6098467975,
"filename": "17000.jpg"
}
}]
}
var g17000 = L.geoJSON(Toe_17000, {
style: {
color: "#4daf4a"
}
});
g17000.on({
click: function() {
$("#panel").html(Toe_17000.features[0].properties.Years_Ago + " Years Ago" + info17000 + glacierInfo + selfPlug);
}
});
/*Glacier 20500*/
var Toe_20500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
//redacted
]
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 20500,
"SHAPE_Leng": 3087165.91023,
"Shape_Le_1": 33.5221258781,
"Shape_Area": 32.9568211425,
"filename": "20500.jpg"
}
}]
}
var g20500 = L.geoJSON(Toe_20500, {
style: {
color: "#ffff33"
}
});
g20500.on({
click: function() {
$("#panel").html(Toe_20500.features[0].properties.Years_Ago + " Years Ago" + info20500 + glacierInfo + selfPlug);
}
});
/*Glacier 24000*/
var Toe_24000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 24000,
"SHAPE_Leng": 3034250.36063,
"Shape_Le_1": 33.0014683974,
"Shape_Area": 35.7394984299,
"filename": "24000.jpg"
}
}]
}
var g24000 = L.geoJSON(Toe_24000, {
style: {
color: "#984ea3"
}
}
);
g24000.on({
click: function() {
$("#panel").html(Toe_24000.features[0].properties.Years_Ago + " Years Ago" + info24000 + glacierInfo + selfPlug);
}
});
/*Glacier 27500*/
var Toe_27500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 27500,
"SHAPE_Leng": 2984589.95454,
"Shape_Le_1": 32.3931138132,
"Shape_Area": 34.4347324387,
"filename": "27500.jpg"
}
}]
}
var g27500 = L.geoJSON(Toe_27500, {
style: {
color: "#ff7f00"
}
}
);
g27500.on({
click: function() {
$("#panel").html(Toe_27500.features[0].properties.Years_Ago + " Years Ago" + info27500 + glacierInfo + selfPlug);
}
});
/*Glacier 31500*/
var Toe_31500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 2,
"Years_Ago": 31500,
"SHAPE_Leng": 1478866.18087,
"Shape_Le_1": 15.9994195189,
"Shape_Area": 9.83976333148,
"filename": "31500.jpg"
}
}]
}
var g31500 = L.geoJSON(Toe_31500, {
style: {
color: "#a65628"
}
});
g31500.on({
click: function() {
$("#panel").html(Toe_31500.features[0].properties.Years_Ago + " Years Ago" + info31500 + glacierInfo + selfPlug)
}
});
var overlayMaps = {
"31500 years ago": g31500,
"27500 years ago": g27500,
"24000 years ago": g24000,
"20500 years ago": g20500,
"17000 years ago": g17000,
"14600 years ago": g14600,
"11000 years ago": g11000
};
var glacierLayers = L.control.layers(null, overlayMaps).addTo(map);
/*Stylesheet by Will P. Campbell,2021*/
body {
background-color: #ECECEC;
}
#mapid,
#mapid2,
#mapid3,
#mapid4,
#mapid5,
#mapid6,
#mapid7 {
position: fixed;
height: 650px;
width: 60%;
border: 5px solid black;
display: inline-block;
}
h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#panel {
position: fixed;
right: 0;
border: 5px outset black;
background-color: lightblue;
text-align: center;
width: 25%;
height: auto;
padding: 20px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>WISCONSIN GLACIER TIME LAPSE</title>
<!--put your external stylesheet links here-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/leaflet/leaflet.css">
<!--[if IE<9]>
<link rel="stylesheet" href="css/style.ie.css">
<![endif]-->
</head>
<body>
<h1>WISCONSIN GLACIER TIME LAPSE</h1>
<!-- map 1 -->
<div id="mapid"></div>
<!-- map 2 -->
<div id="mapid2"></div>
<!-- map 3 -->
<div id="mapid3"></div>
<!-- map 4 -->
<div id="mapid4"></div>
<!-- map 5 -->
<div id="mapid5"></div>
<!-- map 6 -->
<div id="mapid6"></div>
<!-- map 7 -->
<div id="mapid7"></div>
<div id="panel"><b>Glacier Information Panel</b><br>
<p>Use the checkbox and click on each glacier to learn more about them!</p>
</div>
<!--put your initial page content here-->
<!--you can also use this space for internal scripts or stylesheets;
place these within <script> or <style> tags-->
<!--put your external script links here-->
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/geojson.js"></script>
</body>
</html>
Please let me know if you need any more clarification. I'm new to StackOverflow as well so I apologize if this is an improper or repeat question.
Thanks!

Create an Object mapsData with properties that match your DIV Element data-map value.
Loop your Elements DIVs ELS_map.forEach(initMap); and apply the data you stored beforehand for each map ID inside the mapsData
const L_tiles = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}';
const L_options = {
attribution: 'Tiles: SD, CC BY 3.0 © OSM contrib.',
minZoom: 0,
maxZoom: 18,
ext: 'png'
};
// ALL YOUR DATA GOES HERE!
// Name your properties the same as data-map="" value in HTML
const mapsData = {
glacier_1: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier one Lorem...",
// add title, shapes etc here
},
glacier_2: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier 2 Ipsum...",
// add title, shapes etc here
},
};
const initMap = (EL) => {
const id = EL.dataset.map; // rerturns i.e: "glacier_1"
const data = mapsData[id];
const map = L.map(EL).setView(data.center, data.zoom);
L.tileLayer(L_tiles, L_options).addTo(map);
};
const ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
[data-map] {
height: 300px;
border: 5px solid black;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<div data-map="glacier_1"></div>
<div data-map="glacier_2"></div>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

I am trying to visualise some datapoint on a map using leaflet javascript library.Can you tell me whats wrong with my code?

I am trying to visualize geojson data from URL to my frontend. I am using leaflet library and a project I found as my template on which I have changed the database. Variables AvgMonthlyKL and Suburb do not exist and I do not care about the radius just to display the data point.
Everything is fine with the database and the url which is displaying geojson. I have removed all part of the code peace by peace and tried to replace those variables with others existing from the database but I can not make the datapoint to show up. Please help.
function main_map_init(map, options) {
var dataset = new L.GeoJSON.AJAX("{% url 'waterconsumption' %}", {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
fillColor: 'teal',
color: '#537898',
weight: 1,
fillOpacity: 0.5
}).on({
mouseover: function(e) {
this.setStyle({color: 'yellow'});
},
mouseout: function(e) {
this.setStyle({color: '#537898'});
}
});
},
onEachFeature: function(feature, layer) {
var radius = calcPropRadius(feature.properties.AvgMonthlyKL);
var popupText = "<strong>" + feature.properties.Suburb + "</strong>";
layer.setRadius(radius);
layer.bindPopup(popupText, { offset: new L.Point(0, -radius) });
}
}).addTo(map);
Geojson sample:
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"device_identifier":"f5ea3f85ed562fcde4e2110d14c5ff1f",
"battery":"",
"enqueued":"2019-08-06T10:46:57Z",
"DateTime":"2019-08-07T13:27:54.198Z",
"model":"waterwatchapp.waterconsumption"
},
"id":13,
"geometry":{
"type":"Point",
"coordinates":[
12.540556907653999,
55.748844146729
]
}
}
]
}

This is how you would do if you had the geojson stored locally. By using Leaflet.AJAX the steps are almost identical. Use the pointToLayer similarly with L.geoJSON.
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 100vh;"></div>
<script>
var mymap = L.map('mapid').setView([12.5,
55.748844146729
], 1);
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.streets'
}).addTo(mymap);
var geojsonFeature = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"device_identifier": "f5ea3f85ed562fcde4e2110d14c5ff1f",
"battery": "",
"enqueued": "2019-08-06T10:46:57Z",
"DateTime": "2019-08-07T13:27:54.198Z",
"model": "waterwatchapp.waterconsumption"
},
"id": 13,
"geometry": {
"type": "Point",
"coordinates": [
12.540556907653999,
55.748844146729
]
}
}]
};
L.geoJSON(geojsonFeature, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
fillColor: 'teal',
color: '#537898',
weight: 1,
fillOpacity: 0.5
}).on({
mouseover: function(e) {
this.setStyle({
color: 'yellow'
});
},
mouseout: function(e) {
this.setStyle({
color: '#537898'
});
}
});
},
}).addTo(mymap);
</script>
</body>
</html>

Draw markers on leaflet map from geojson data

How to import geoJson data (with more than 2000 coordinates) into leaflet map?
This is short sample of geo json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 44.8242557024,20.4048512901 ]
},
"properties": {
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 44.8242557024,20.4048512901 ]
},
"properties": {
}
},...]
Code I've tried:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" />
<![endif]-->
<style type="text/css">
body {
padding: 0;
margin: 0;
}
html, body, #cmap {
height: 100%;
}
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="cmap"></div>
<script>
var cupcakeTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.emerald/page.html?access_token=cj5h2mqa63sc92srx3bu62e2j', {
maxZoom: 18
});
$.getJSON("convertcsv.geojson", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);cj5h2mqa63sc92srx3bu62e2j
}
});
var map = L.map('map', {
center: [44, 20],
zoom: 7
});
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
id: 'examples.map-20v6611k'
}).addTo(map);
new L.GeoJSON(meta1nJson).addTo(map);
});
</script>
</body>
</html>
But nothing happens, it is just a gray background. I'm not sure where the mistake is (maybe there is more than one), but probably there is a mistake with importing geojson data and map token.
I'm total beginner at this. Thank in advance.

You seem to have to have many issues in your code. Firstly an element with id 'map' does not exist in your html, so the map layer cannot be placed. You have to add 'cmap' as the id in the below code.
var map = L.map('cmap', {
center: [44, 20],
zoom: 7
});
Also meta1nJson does not seem to be defined in your code, so the below code would not work.
new L.GeoJSON(meta1nJson).addTo(map);
The layer cupcakeTiles seems to be defined but is never added to the map. You also have a stray string in the below code which should be removed.
$.getJSON("convertcsv.geojson", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name); //cj5h2mqa63sc92srx3bu62e2j
}
});

Why Google Maps Polyline strokeColor always black?

I have already draw some trajectories in Google Maps Api. But I want to give a different color to each trajectory. The problem is that the color always is black even when strokeColor is not '#0000'. Any ideas about what is happening? Here is my code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -12, lng: -77},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.loadGeoJson('aristas.geojson');
var aristasPath = new google.maps.Polyline({
path: aristas,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
aristasPath.setMap(map);
}
</script>

You are adding your polyline to the data layer with .loadGeoJson, that needs to be styled using the data layer styling methods, not as a normal google.maps.Polyline
// Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: -12,
lng: -77
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.addGeoJson(platesJson);
// Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
}
google.maps.event.addDomListener(window, 'load', initMap);
var platesJson = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"strnum": 420,
"platecode": 201,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "PERU-CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-81.8796, -5.0707],
[-81.876, -5.1257],
[-81.8735, -5.2358],
[-81.8737, -5.2473],
[-81.8806, -5.3778],
[-81.871, -5.4765],
[-81.8638, -5.5843],
[-81.8346, -5.736],
[-81.8182, -5.8416],
[-81.7953, -5.9634],
[-81.7765, -6.0598],
[-81.7624, -6.1654],
[-81.7437, -6.2687],
[-81.7293, -6.3536],
[-81.7064, -6.4775],
[-81.6682, -6.6405],
[-81.6263, -6.7213],
[-81.5982, -6.8087],
[-81.5294, -6.9219],
[-81.4834, -7.0347],
[-81.4483, -7.1152],
[-81.3914, -7.2533],
[-81.3679, -7.3427],
[-81.3469, -7.4436],
[-81.3323, -7.5191],
[-81.2998, -7.6201],
[-81.2756, -7.673],
[-81.2494, -7.7373],
[-81.2318, -7.7764],
[-81.2255, -7.8039],
[-81.1969, -7.866],
[-81.1661, -7.9327],
[-81.1379, -8.0129],
[-81.1037, -8.1434],
[-81.0577, -8.2559],
[-81.0115, -8.3547],
[-80.9587, -8.4649],
[-80.9126, -8.5682],
[-80.8997, -8.6139],
[-80.8439, -8.6855],
[-80.8132, -8.7611],
[-80.7695, -8.8688],
[-80.7301, -8.965],
[-80.6681, -9.0752],
[-80.6064, -9.1967],
[-80.5598, -9.2748],
[-80.5088, -9.3598],
[-80.4557, -9.4584],
[-80.4184, -9.5408],
[-80.3541, -9.6486],
[-80.2921, -9.7608],
[-80.2479, -9.8433],
[-80.201, -9.9053],
[-80.126, -10.0518],
[-80.0703, -10.1298],
[-80.0196, -10.2304],
[-79.9303, -10.3452],
[-79.8612, -10.4438],
[-79.817, -10.5261],
[-79.7463, -10.6608],
[-79.6729, -10.7684],
[-79.6218, -10.8507],
[-79.5865, -10.9169],
[-79.551, -10.9785],
[-79.5266, -11.0151],
[-79.4953, -11.0541],
[-79.4757, -11.1086],
[-79.4607, -11.1608],
[-79.4388, -11.2131],
[-79.3921, -11.2839],
[-79.3566, -11.341],
[-79.2965, -11.4323],
[-79.2206, -11.5306],
[-79.1829, -11.5899],
[-79.1426, -11.6403],
[-79.1004, -11.7064],
[-79.0628, -11.7724],
[-79.0273, -11.8293],
[-78.9893, -11.8773],
[-78.9271, -11.9752],
[-78.8806, -12.0594],
[-78.7889, -12.169],
[-78.7083, -12.2582],
[-78.6413, -12.3425],
[-78.5833, -12.42],
[-78.5209, -12.5088],
[-78.4454, -12.6269],
[-78.4124, -12.6948],
[-78.377, -12.7606],
[-78.3217, -12.858],
[-78.2665, -12.9622],
[-78.2089, -13.0619],
[-78.1528, -13.1189],
[-78.1058, -13.1713],
[-78.0453, -13.2373],
[-77.983, -13.3325],
[-77.952, -13.3868],
[-77.89, -13.4908],
[-77.7986, -13.62],
[-77.738, -13.677],
[-77.6595, -13.7566],
[-77.5585, -13.8589],
[-77.5113, -13.9045],
[-77.4488, -13.9837],
[-77.3997, -14.0471],
[-77.2988, -14.1516],
[-77.2249, -14.2354],
[-77.1801, -14.2831],
[-77.0858, -14.3761],
[-76.9742, -14.5207],
[-76.9026, -14.6066],
[-76.8151, -14.695],
[-76.7568, -14.7539],
[-76.6966, -14.8328],
[-76.6426, -14.8805],
[-76.6043, -14.9123],
[-76.5272, -14.9426],
[-76.5002, -14.9697],
[-76.4512, -15.0372],
[-76.3958, -15.1271],
[-76.3718, -15.1919],
[-76.2867, -15.2844],
[-76.1922, -15.366],
[-76.0885, -15.4455],
[-75.9892, -15.5137],
[-75.8835, -15.6065],
[-75.8343, -15.6605],
[-75.7868, -15.688],
[-75.7211, -15.7223],
[-75.6718, -15.7764],
[-75.6115, -15.8527],
[-75.5537, -15.9378],
[-75.4955, -16.003],
[-75.4324, -16.0527],
[-75.3538, -16.1271],
[-75.2975, -16.1723],
[-75.2206, -16.2134],
[-75.173, -16.2363],
[-75.0938, -16.2819],
[-75.0286, -16.3404],
[-74.959, -16.4035],
[-74.8848, -16.471],
[-74.8082, -16.5297],
[-74.788, -16.5499],
[-74.6751, -16.6268],
[-74.6052, -16.6766],
[-74.4517, -16.7784],
[-74.3209, -16.8732],
[-74.1941, -16.9415],
[-74.0948, -17.0092],
[-74.0022, -17.0658],
[-73.8987, -17.1534],
[-73.7904, -17.23],
[-73.6974, -17.2712],
[-73.5977, -17.3169],
[-73.4981, -17.3713],
[-73.4422, -17.436],
[-73.3863, -17.5006],
[-73.3189, -17.5654],
[-73.2204, -17.6746],
[-73.1355, -17.7746],
[-72.9596, -17.9025],
[-72.8495, -18.0051],
[-72.7776, -18.072],
[-72.6854, -18.1523],
[-72.6089, -18.2127],
[-72.5661, -18.2484],
[-72.4901, -18.3392],
[-72.4277, -18.4211],
[-72.352, -18.5271],
[-72.2618, -18.5963],
[-72.1823, -18.6217],
[-72.1168, -18.6642],
[-72.0611, -18.7371],
[-72.0148, -18.825],
[-71.8849, -18.9687],
[-71.8676, -19.0169],
[-71.8187, -19.0895],
[-71.7944, -19.1355],
[-71.7453, -19.1972],
[-71.687, -19.259],
[-71.6264, -19.3144],
[-71.5974, -19.3539],
[-71.5595, -19.4023],
[-71.5149, -19.4595],
[-71.4862, -19.512],
[-71.4531, -19.5755],
[-71.4317, -19.6538],
[-71.3991, -19.741],
[-71.3665, -19.826],
[-71.3143, -19.9653],
[-71.2905, -20.0327],
[-71.2605, -20.1369],
[-71.2512, -20.2472],
[-71.2303, -20.3489],
[-71.2043, -20.4226],
[-71.1895, -20.4854],
[-71.1863, -20.5565],
[-71.186, -20.7739],
[-71.1786, -20.8643],
[-71.1853, -20.9737],
[-71.1805, -21.079],
[-71.1729, -21.1563],
[-71.1613, -21.268],
[-71.1497, -21.3753],
[-71.1377, -21.4612],
[-71.1416, -21.5445],
[-71.1457, -21.6364],
[-71.1538, -21.7004],
[-71.1544, -21.7303],
[-71.1794, -21.843],
[-71.1858, -21.9326],
[-71.1875, -22.02],
[-71.1892, -22.1094],
[-71.1845, -22.216],
[-71.1851, -22.3607],
[-71.181, -22.5031],
[-71.1939, -22.5794],
[-71.2321, -22.7739],
[-71.2546, -22.871],
[-71.2778, -23.004],
[-71.2961, -23.1222],
[-71.2834, -23.2873],
[-71.2969, -23.3926],
[-71.2989, -23.4917],
[-71.2851, -23.6057],
[-71.3027, -23.6855],
[-71.3118, -23.7969],
[-71.3184, -23.8977],
[-71.328, -24.0383],
[-71.3413, -24.1304],
[-71.3664, -24.2412],
[-71.3866, -24.3372],
[-71.3787, -24.5132],
[-71.3796, -24.6721],
[-71.379, -24.7577],
[-71.3746, -24.8809],
[-71.3893, -25.0432],
[-71.4122, -25.1552],
[-71.4473, -25.3085],
[-71.4826, -25.4741],
[-71.4918, -25.588],
[-71.4655, -25.6465],
[-71.4655, -25.6465],
[-71.4651, -25.7397],
[-71.4719, -25.8493],
[-71.4735, -25.9279],
[-71.4806, -26.0538],
[-71.4965, -26.1609],
[-71.5245, -26.3006],
[-71.5664, -26.4482],
[-71.5889, -26.5445],
[-71.6372, -26.6732],
[-71.6522, -26.8474],
[-71.6607, -26.9272],
[-71.6882, -27.0415],
[-71.7346, -27.188],
[-71.7597, -27.2939],
[-71.7892, -27.3955],
[-71.8165, -27.5011],
[-71.8336, -27.5559],
[-71.8689, -27.6001],
[-71.8882, -27.6527],
[-71.9121, -27.7012],
[-71.9463, -27.8064],
[-71.9406, -27.8654],
[-71.9393, -27.9142],
[-71.9527, -28.0053]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 444,
"platecode": 291,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 1,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-71.9527, -28.0053],
[-71.9851, -28.1366],
[-72.0072, -28.2112],
[-72.049, -28.3522],
[-72.1035, -28.5534],
[-72.1591, -28.7018],
[-72.1887, -28.8041],
[-72.2016, -28.8763],
[-72.2217, -28.9645],
[-72.2224, -28.9966],
[-72.2242, -29.083],
[-72.2368, -29.139],
[-72.2514, -29.1829],
[-72.2853, -29.2726],
[-72.3071, -29.3284],
[-72.305, -29.4486],
[-72.3238, -29.5823],
[-72.3395, -29.6779],
[-72.3671, -29.7932],
[-72.4251, -29.9397],
[-72.4341, -30.0431],
[-72.4545, -30.1441],
[-72.4674, -30.2134],
[-72.4695, -30.3126],
[-72.4508, -30.4002],
[-72.446, -30.4973],
[-72.4499, -30.5725],
[-72.4656, -30.6671],
[-72.4835, -30.7597],
[-72.4951, -30.872],
[-72.4934, -31.1143],
[-72.5261, -31.2572],
[-72.5313, -31.3926],
[-72.5351, -31.465],
[-72.5439, -31.555],
[-72.55, -31.6234],
[-72.5487, -31.6723],
[-72.5293, -31.7254],
[-72.5256, -31.7684],
[-72.5245, -31.8231],
[-72.5325, -31.8738],
[-72.5518, -31.9242],
[-72.5717, -31.9979],
[-72.5779, -32.0738],
[-72.5789, -32.1205],
[-72.5824, -32.1749],
[-72.5832, -32.2118],
[-72.5811, -32.2196],
[-72.5679, -32.247],
[-72.539, -32.2824],
[-72.5237, -32.3157],
[-72.5313, -32.3486],
[-72.5503, -32.3851],
[-72.5814, -32.4467],
[-72.6154, -32.5373],
[-72.6348, -32.5892],
[-72.6401, -32.6259],
[-72.6602, -32.7068],
[-72.6663, -32.7782],
[-72.6677, -32.8419],
[-72.6664, -32.8882],
[-72.6607, -32.9423],
[-72.6531, -33.0118],
[-72.6538, -33.0426],
[-72.6551, -33.1023],
[-72.6627, -33.1387],
[-72.6772, -33.175],
[-72.6909, -33.2767],
[-72.741, -33.3757],
[-72.7447, -33.4389],
[-72.7695, -33.5267],
[-72.7801, -33.5954],
[-72.7779, -33.5974],
[-72.7787, -33.6337],
[-72.8056, -33.7136],
[-72.844, -33.797],
[-72.8591, -33.8597],
[-72.8884, -33.9432],
[-72.9127, -34.0114],
[-72.953, -34.0774],
[-73.0047, -34.1393],
[-73.0723, -34.1991],
[-73.1331, -34.2609],
[-73.1892, -34.315],
[-73.2542, -34.3615],
[-73.2915, -34.3912],
[-73.3522, -34.449],
[-73.3993, -34.5127],
[-73.4605, -34.5912],
[-73.5054, -34.6567],
[-73.5739, -34.7557],
[-73.6333, -34.8585],
[-73.6578, -34.9297],
[-73.6772, -34.9803],
[-73.704, -35.0532],
[-73.7327, -35.1129],
[-73.7596, -35.1895],
[-73.7817, -35.2586],
[-73.7949, -35.3353],
[-73.7988, -35.4082],
[-73.7928, -35.4476],
[-73.7942, -35.5074],
[-73.8133, -35.5445],
[-73.8284, -35.6078],
[-73.9549, -35.8464],
[-74.0473, -35.9901],
[-74.0809, -36.0583],
[-74.1119, -36.1154],
[-74.1667, -36.2147],
[-74.2074, -36.2937],
[-74.2436, -36.3764],
[-74.2817, -36.4442],
[-74.3294, -36.534],
[-74.3493, -36.6019],
[-74.4045, -36.719],
[-74.4342, -36.816],
[-74.4744, -36.977],
[-74.5134, -37.081],
[-74.5509, -37.2213],
[-74.5626, -37.3344],
[-74.5716, -37.4273],
[-74.5808, -37.5274],
[-74.5841, -37.5711],
[-74.5954, -37.6673],
[-74.6012, -37.7199],
[-74.6033, -37.8106],
[-74.6044, -37.8577],
[-74.6129, -37.9301],
[-74.6214, -38.0023],
[-74.6304, -38.0926],
[-74.6311, -38.1215],
[-74.6372, -38.19],
[-74.6335, -38.228],
[-74.6413, -38.2657],
[-74.6769, -38.3247],
[-74.7377, -38.3796],
[-74.7829, -38.4581],
[-74.8232, -38.5204],
[-74.8643, -38.6149],
[-74.8795, -38.6775],
[-74.8896, -38.7167],
[-74.8837, -38.758],
[-74.878, -38.8082],
[-74.8814, -38.8564]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 445,
"platecode": 292,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-74.8814, -38.8564],
[-74.9212, -38.897],
[-74.9545, -38.9501],
[-74.9628, -39.0142],
[-74.9619, -39.073],
[-74.9672, -39.1033],
[-74.9822, -39.1582],
[-75.0043, -39.222],
[-75.0197, -39.2911],
[-75.0335, -39.3956],
[-75.0417, -39.4523],
[-75.0439, -39.5443],
[-75.0456, -39.6168],
[-75.0474, -39.6893],
[-75.0467, -39.7599],
[-75.0489, -39.8516],
[-75.0503, -39.9114],
[-75.0486, -39.9343],
[-75.0458, -40.0065],
[-75.0037, -40.0086],
[-74.9999, -40.0368],
[-75.003, -40.0614],
[-75.0127, -40.0806],
[-75.0175, -40.0893],
[-75.034, -40.1048],
[-75.0692, -40.1323],
[-75.093, -40.1635],
[-75.1242, -40.2122],
[-75.1412, -40.2435],
[-75.1542, -40.2959],
[-75.165, -40.35],
[-75.1709, -40.3954],
[-75.1819, -40.4565],
[-75.1901, -40.5001],
[-75.1987, -40.5576],
[-75.2067, -40.5958],
[-75.2124, -40.6324],
[-75.2182, -40.6759],
[-75.2195, -40.7177],
[-75.2137, -40.7544],
[-75.2101, -40.7858],
[-75.2017, -40.8103],
[-75.1936, -40.847],
[-75.1924, -40.8835],
[-75.2003, -40.9181],
[-75.2151, -40.9508],
[-75.2485, -40.9954],
[-75.2723, -41.0262],
[-75.2919, -41.0675],
[-75.3087, -41.0949],
[-75.3331, -41.143],
[-75.356, -41.2187]
]
}
}]
};
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Develop Reference

JavaScript is the programming language of the Web.

highlight feature with click in mapbox gl - javascript

Related

Saving a div contains a geomap as an Image

Multiple Leaflet maps

I am trying to visualise some datapoint on a map using leaflet javascript library.Can you tell me whats wrong with my code?

Draw markers on leaflet map from geojson data

Why Google Maps Polyline strokeColor always black?

Categories

Resources