Mapbox How to show marker on current location? - javascript

I want to build a page which shows users current location.
Feature I want to build is that user can select any place on the map and script will calculate the distance between his location and clicked location.
What have been achieved: the web site shows location and I user can click to put second marker.
Problem: the first marker should be appearing on users current location.
Code which already have:
JSfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Distance between two markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<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' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
pre.ui-distance {
position:absolute;
bottom:10px;
left:10px;
padding:5px 10px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:11px;
line-height:18px;
border-radius:3px;
}
.ui-button {
background:#3887BE;
color:#FFF;
display:block;
position:absolute;
top:50%;left:50%;
width:160px;
margin:-20px 0 0 -80px;
z-index:100;
text-align:center;
padding:10px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
}
.ui-button:hover {
background:#3074a4;
color:#fff;
}
</style>
<div id='map'></div>
<div class='ui-button'>
<a href='#' id='geolocate' >Find me</a>
<pre id='distance' class='ui-distance'>Click to place a marker</pre>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYWJ6YWwiLCJhIjoiY2llempiaW9oMWJvdXNnbTAxZnY4NTNvOSJ9.I0bW1wxrOYS2MPZD0FrTtA';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([38.9, -77], 12);
// Start with a fixed marker.
var fixedMarker = L.marker(new L.LatLng(38.9131775, -77.032544), {
icon: L.mapbox.marker.icon({
'marker-color': 'ff8888'
})
}).bindPopup('Mapbox DC').addTo(map);
// Store the fixedMarker coordinates in a variable.
var fc = fixedMarker.getLatLng();
// Create a featureLayer that will hold a marker and linestring.
var featureLayer = L.mapbox.featureLayer().addTo(map);
// When a user clicks on the map we want to
// create a new L.featureGroup that will contain a
// marker placed where the user selected the map and
// a linestring that draws itself between the fixedMarkers
// coordinates and the newly placed marker.
map.on('click', function(ev) {
// ev.latlng gives us the coordinates of
// the spot clicked on the map.
var c = ev.latlng;
var geojson = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [c.lng, c.lat]
},
"properties": {
"marker-color": "#ff8888"
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[fc.lng, fc.lat],
[c.lng, c.lat]
]
},
"properties": {
"stroke": "#000",
"stroke-opacity": 0.5,
"stroke-width": 4
}
}
];
featureLayer.setGeoJSON(geojson);
// Finally, print the distance between these two points
// on the screen using distanceTo().
var container = document.getElementById('distance');
container.innerHTML = (fc.distanceTo(c)).toFixed(0) + 'm';
});
var geolocate = document.getElementById('geolocate');
if (!navigator.geolocation) {
geolocate.innerHTML = 'Geolocation is not available';
} else {
geolocate.onclick = function (e) {
e.preventDefault();
e.stopPropagation();
map.locate();
};
}
// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
map.fitBounds(e.bounds);
myLayer.setGeoJSON({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.latlng.lng, e.latlng.lat]
},
properties: {
'title': 'Here I am!',
'marker-color': '#ff8888',
'marker-symbol': 'star'
}
});
// And hide the geolocation button
geolocate.parentNode.removeChild(geolocate);
});
// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
geolocate.innerHTML = 'Position could not be found';
});
</script>
</body>
</html>


Sorry, it's a little messy and not exactly what I believe you want, but could be altered to work as you want (I created a second featureLayer so that the original marker that denotes the found user location stays on the map - This way one has to click twice to measure two distances but at least the user gets to choose the starting point whereas the "found" starting point might not be the user's exact location.) I got rid of the fixedMarker that it starts with because we don't need it.
The JSFiddle
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([38.9, -77], 12);
// Create a featureLayer that will hold a marker and linestring.
var featureLayer = L.mapbox.featureLayer().addTo(map);
var secondFeatureLayer = L.mapbox.featureLayer().addTo(map);
// 1. Let's create a counter so that we can record the separate clicks
var counter = 0;
// 2. Let's use some variables outside the function scope
var c,
c2,
prevClick;
map.on('click', function(ev) {
// 3. Check if we've yet to click once
if (counter < 1) {
// 4. assign current click coordinates to prevClick for later use
prevClick = ev.latlng;
// ev.latlng gives us the coordinates of
// the spot clicked on the map.
c = ev.latlng;
counter++;
} else {
c = prevClick;
counter = 0;
}
c2 = ev.latlng;
var geojson = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [c.lng, c.lat]
},
"properties": {
"marker-color": "#ff8888"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [c2.lng, c2.lat]
},
"properties": {
"marker-color": "#ff8888"
}
},{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[c.lng, c.lat],
[c2.lng, c2.lat]
]
},
"properties": {
"stroke": "#000",
"stroke-opacity": 0.5,
"stroke-width": 4
}
}
];
secondFeatureLayer.setGeoJSON(geojson);
// Finally, print the distance between these two points
// on the screen using distanceTo().
var container = document.getElementById('distance');
container.innerHTML = (c2.distanceTo(c)).toFixed(0) + 'm';
});
var geolocate = document.getElementById('geolocate');
if (!navigator.geolocation) {
geolocate.innerHTML = 'Geolocation is not available';
} else {
geolocate.onclick = function (e) {
e.preventDefault();
e.stopPropagation();
map.locate();
};
}
// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
map.fitBounds(e.bounds);
featureLayer.setGeoJSON({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.latlng.lng, e.latlng.lat]
},
properties: {
'title': 'Here I am!',
'marker-color': '#ff8888',
'marker-symbol': 'star'
}
});
// And hide the geolocation button
geolocate.parentNode.removeChild(geolocate);
});
// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
geolocate.innerHTML = 'Position could not be found';
});

Related

Google Maps GeoJSON feature trigger click event

I have a featurecollection of features with their corresponding IDs like this:
"type"=>"Feature",
"id"=>"test_1",
"properties"=>array("desc"=>...
and want to trigger a click event from a button on the document so that the infowindow opens.
var featId = 'test_1';
map.event.trigger(featId, 'click');
but I'm getting
Uncaught TypeError: Cannot read property 'trigger' of undefined
The infowindow opens when I click on the polygon on the map.
Here's a JS fiddle.
I've also added a code snippet using stackoverflow's editor.
var mygeojson={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
'id':'test_2',
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
0.5767822265625,
46.437856895024204
],
[
0.560302734375,
46.160809861457125
],
[
0.9118652343749999,
46.10370875598026
],
[
1.42822265625,
46.22545288226939
],
[
0.9118652343749999,
46.581518465658014
],
[
0.5767822265625,
46.437856895024204
]
]
]
}
},
{
"type": "Feature",
'id':'test_1',
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
1.9335937499999998,
46.98774725646568
],
[
1.8841552734374998,
46.73233101286786
],
[
2.581787109375,
46.53619267489863
],
[
2.8784179687499996,
46.71350244599995
],
[
3.065185546875,
47.00647991252098
],
[
2.3785400390625,
47.18597932702905
],
[
2.1917724609375,
47.60986653003798
],
[
1.9335937499999998,
46.98774725646568
]
]
]
}
}
]
};
function openinfo(target_featId)
{
//map.event.trigger(featId, 'click');
google.maps.event.trigger(map, 'click');
}
initpage = function()
{
var selected_id = 0;
console.log('html loaded');
//center lat/lon
var latlng = new google.maps.LatLng(46.315,0.467);
//map configutations
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true,
};
map = new google.maps.Map(document.getElementById("themap"), myOptions);
map.data.addGeoJson(mygeojson);
map.data.setStyle(function(feature) {
//var SD_NAME = feature.getProperty('SD_NAME');
//var color = feature.getProperty('boja');
var featId = feature.getId();
var color = 'gray';
if(selected_id == featId)
{
color='#009900';
console.log('setting green for '+featId)
} else
{
color = 'gray';
console.log('setting gray for '+featId)
}
return {
fillColor: color,
strokeColor: color,
strokeWeight: 1
}
});
var infowindow = new google.maps.InfoWindow();
map.data.addListener('click', function(event) {
//var feat_desc = event.feature.getProperty("desc");
var featId = event.feature.getId();
map.data.forEach(function(feature2) {
if(featId == selected_id) feature2.setProperty('color','gray');
});
selected_id = featId;
var color = '#009900';
infowindow.setContent("<div style='width:150px; color: #000;'> litttle test "+featId+"</div>");
// position the infowindow on the marker
infowindow.setPosition(event.feature.getGeometry().getAt(0).getAt(0));
infowindow.open(map);
});
}
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px; background: #fff; color: #bbb; font-size: 13px; font-family: Arial;}
#themap { height:100%; }
<html>
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
</head>
<body onload="initpage()">
Open poly 1
Open poly 2<br /><br />
<div id="themap">
</div>
</body>
</html>

I've successfully fixed this by using:
function openinfo(target_featId)
{
google.maps.event.trigger(map.data,'click',target_featId);
}
and then had a new issue with the addListener function. the event.feature was undefined, so I fixed it with:if(!event.feature) event.feature=event; inside map.data.addListener('click', function(event) {

Animate multiple point along routes using Mapbox-GL.JS

I am having problems with following example :
Animate a point along a route
What I am trying to achieve is to make another point and routes in the same map container.
What I tried so far is this
mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [118.0148634, -2.548926],
zoom: 4.1
});
var route = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[117.66769409179686,3.2913401805277034],[117.75009155273438,3.2419820359767444],
[117.81188964843751,3.2008484073844365],[117.93273925781249,3.1514858749293237],
[118.048095703125,3.0637245031869744],[118.20190429687501,2.9649843693339677],
[118.35571289062499,2.855262784366583],[118.443603515625,2.789424777005989],
[118.597412109375,2.67419944615503],[118.817138671875,2.4656692707025543],
[118.93798828125,2.191238104506552],[118.97644042968749,1.9442068658308456],
[119.0643310546875,1.6477220517969353],[119.13574218749999,1.334718132769963],
[119.15222167968751,1.0051974541602744],[119.05334472656249,0.5987439850125229],
[118.9215087890625,0.29113644247137116],[118.8006591796875,-0.027465819260582135],
[118.597412109375,-0.5163504323777461],[118.27880859375001,-0.8953492997435784],
[118.16894531249999,-1.219390359762202],[117.83935546874999,-1.6641946615712557],
[117.7349853515625,-1.8618548574369598],[117.65258789062499,-2.0485136203038063],
[117.40539550781249,-2.67968661580376],[117.07580566406249,-3.2721456350750127],
[116.7572021484375,-3.8806964824972487],[116.44958496093749,-4.209464815163466],
[115.7574462890625,-4.335456463573485],[115.213623046875,-4.510714125698484],
[114.6533203125,-4.647604837557583],[114.1864013671875,-4.70235372255946],
[113.79089355468749,-4.7242520745232515],[113.4228515625,-4.8118385341739005],
[112.9669189453125,-4.8282597468669755],[112.28576660156249,-4.844680562025358],
[111.104736328125,-4.855627550617055],[110.7366943359375,-4.855627550617055],
[110.19287109375,-4.855627550617055],[109.60510253906249,-4.926778627933801],
[109.00634765625,-5.00339434502215],[108.4075927734375,-5.036226914872183],
[108.116455078125,-5.189423479732417],[107.5177001953125,-5.369928743247035],
[107.061767578125,-5.473831889192786],[106.76513671875,-5.544913134097361],
[106.44653320312499,-5.626919311742117],[106.248779296875,-5.747174076651375],
[106.1444091796875,-5.807291968003861],[106.02948188781738,-5.882003409958776]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-252.99316406250003,-5.932972207945653],[-252.92724609374997,-5.774501181937723],
[-252.872314453125,-5.697981985463135],[-252.8118896484375,-5.572249801113899],
[-252.7789306640625,-5.484768018141262],[-252.7294921875,-5.353521355337321],
[-252.66357421875,-5.244127581489528],[-252.57568359374997,-5.112829778499449],
[-252.509765625,-5.00339434502215],[-252.42187499999997,-4.872047700241915],
[-252.2900390625,-4.740675384778361],[-252.11425781249997,-4.653079918274038],
[-252.00439453125,-4.54357027937176],[-251.78466796875,-4.434044005032582],
[-251.65283203125003,-4.34641127533318],[-251.45507812499997,-4.171115454867424],
[-251.16943359375,-4.083452772038619],[-251.03759765625,-3.9738609758391017],
[-250.90576171875,-3.8204080831949407],[-250.70800781249997,-3.688855143147035],
[-250.42236328125,-3.579212785860631],[-250.31250000000003,-3.513421045640032],
[-250.13671875,-3.3818237353282767],[-249.87304687499997,-3.2940822283128046],
[-249.697265625,-3.118576216781991],[-249.697265625,-2.943040910055132]
]
}
}
]
};
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [117.66769409179686,3.2913401805277034]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-252.99316406250003,-5.932972207945653]
}
}
]
};
// Calculate the distance in kilometers between route start/end point.
for(i=0;i<2;i++) {
var lineDistance = turf.lineDistance(route.features[0], 'kilometers');
}
console.log(lineDistance)
var arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 1000;
// Draw an arc between the `origin` & `destination` of the two points
for (var i = 0; i < lineDistance; i += lineDistance / steps) {
var segment = turf.along(route.features[0], i, 'kilometers');
arc.push(segment.geometry.coordinates);
}
// Update the route with calculated arc coordinates
route.features[0].geometry.coordinates = arc;
// Used to increment the value of the point measurement against the route.
var counter = 0;
map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route', {
"type": "geojson",
"data": route
});
map.addSource('point', {
"type": "geojson",
"data": point
});
map.addLayer({
"id": "route",
"source": "route",
"type": "line",
"paint": {
"line-width": 1,
"line-color": "#007cbf"
}
});
map.addLayer({
"id": "point",
"source": "point",
"type": "symbol",
"layout": {
"icon-image": "airport-15",
"icon-rotate": ["get", "bearing"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
});
function animate() {
// Update point geometry to a new position based on counter denoting
// the index to access the arc.
for(i=0;i < 2;i++) {
point.features[i].properties.bearing = turf.bearing(
turf.point(route.features[i].geometry.coordinates[counter >= steps ? counter - 1 : counter]),
turf.point(route.features[i].geometry.coordinates[counter >= steps ? counter : counter + 1])
);
}
point.features[0].geometry.coordinates = route.features[0].geometry.coordinates[counter];
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of animation so long the end has not been reached.
if (counter < steps) {
requestAnimationFrame(animate);
}
counter = counter + 1;
}
document.getElementById('replay').addEventListener('click', function() {
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
// Reset the counter
counter = 0;
// Restart the animation.
animate(counter);
});
// Start the animation.
animate(counter);
});
.overlay {
position: absolute;
top: 10px;
left: 30px;
}
.overlay button {
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
}
.overlay button:hover {
background-color:#4ea0da;
}
body { margin:0; padding:0; }
#map { top:0; bottom:0; width:100%;height: 600px }
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Animate a point along a route</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'></script>
<div class="col-md-12">
<div class="card text-white">
<h5 class="card-header bg-info">Featured</h5>
<div class="card-body">
<div class="col-md-12">
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After few things that I tried,the result of first attempt was Point 1 and Line 1 are reaching to the end.but Point 2 and Line 2 stopped after Point 1 and Line 1 are reaching to the end.
This is my 10th attempt. The other attempt was error on the loop.
What should I do with this ?

The basic problem is that the two routes are different lengths, so you go out of bounds on the coordinates for the shorter one while you're still going through the longer one. The snippet I inserted below accounts for that. Trying it just now, my edit completes without errors.
You'll probably want to tweak it a bit further, right now the shorter route completes much more quickly than the longer one, and moves much faster than the longer one. If you want them to appear to go the same speed, you'll need to use fewer steps for for the shorter one. If you want them to complete in the same amount of time, you'll need to add more points to the shorter one, or reduce the frequency with which the shorter one refreshes.
mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [118.0148634, -2.548926],
zoom: 4.1
});
var route = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[117.66769409179686,3.2913401805277034],[117.75009155273438,3.2419820359767444],
[117.81188964843751,3.2008484073844365],[117.93273925781249,3.1514858749293237],
[118.048095703125,3.0637245031869744],[118.20190429687501,2.9649843693339677],
[118.35571289062499,2.855262784366583],[118.443603515625,2.789424777005989],
[118.597412109375,2.67419944615503],[118.817138671875,2.4656692707025543],
[118.93798828125,2.191238104506552],[118.97644042968749,1.9442068658308456],
[119.0643310546875,1.6477220517969353],[119.13574218749999,1.334718132769963],
[119.15222167968751,1.0051974541602744],[119.05334472656249,0.5987439850125229],
[118.9215087890625,0.29113644247137116],[118.8006591796875,-0.027465819260582135],
[118.597412109375,-0.5163504323777461],[118.27880859375001,-0.8953492997435784],
[118.16894531249999,-1.219390359762202],[117.83935546874999,-1.6641946615712557],
[117.7349853515625,-1.8618548574369598],[117.65258789062499,-2.0485136203038063],
[117.40539550781249,-2.67968661580376],[117.07580566406249,-3.2721456350750127],
[116.7572021484375,-3.8806964824972487],[116.44958496093749,-4.209464815163466],
[115.7574462890625,-4.335456463573485],[115.213623046875,-4.510714125698484],
[114.6533203125,-4.647604837557583],[114.1864013671875,-4.70235372255946],
[113.79089355468749,-4.7242520745232515],[113.4228515625,-4.8118385341739005],
[112.9669189453125,-4.8282597468669755],[112.28576660156249,-4.844680562025358],
[111.104736328125,-4.855627550617055],[110.7366943359375,-4.855627550617055],
[110.19287109375,-4.855627550617055],[109.60510253906249,-4.926778627933801],
[109.00634765625,-5.00339434502215],[108.4075927734375,-5.036226914872183],
[108.116455078125,-5.189423479732417],[107.5177001953125,-5.369928743247035],
[107.061767578125,-5.473831889192786],[106.76513671875,-5.544913134097361],
[106.44653320312499,-5.626919311742117],[106.248779296875,-5.747174076651375],
[106.1444091796875,-5.807291968003861],[106.02948188781738,-5.882003409958776]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-252.99316406250003,-5.932972207945653],[-252.92724609374997,-5.774501181937723],
[-252.872314453125,-5.697981985463135],[-252.8118896484375,-5.572249801113899],
[-252.7789306640625,-5.484768018141262],[-252.7294921875,-5.353521355337321],
[-252.66357421875,-5.244127581489528],[-252.57568359374997,-5.112829778499449],
[-252.509765625,-5.00339434502215],[-252.42187499999997,-4.872047700241915],
[-252.2900390625,-4.740675384778361],[-252.11425781249997,-4.653079918274038],
[-252.00439453125,-4.54357027937176],[-251.78466796875,-4.434044005032582],
[-251.65283203125003,-4.34641127533318],[-251.45507812499997,-4.171115454867424],
[-251.16943359375,-4.083452772038619],[-251.03759765625,-3.9738609758391017],
[-250.90576171875,-3.8204080831949407],[-250.70800781249997,-3.688855143147035],
[-250.42236328125,-3.579212785860631],[-250.31250000000003,-3.513421045640032],
[-250.13671875,-3.3818237353282767],[-249.87304687499997,-3.2940822283128046],
[-249.697265625,-3.118576216781991],[-249.697265625,-2.943040910055132]
]
}
}
]
};
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [117.66769409179686,3.2913401805277034]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-252.99316406250003,-5.932972207945653]
}
}
]
};
// Calculate the distance in kilometers between route start/end point.
for(i=0;i<2;i++) {
var lineDistance = turf.lineDistance(route.features[0], 'kilometers');
}
console.log(lineDistance)
var arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 1000;
// Draw an arc between the `origin` & `destination` of the two points
for (var i = 0; i < lineDistance; i += lineDistance / steps) {
var segment = turf.along(route.features[0], i, 'kilometers');
arc.push(segment.geometry.coordinates);
}
// Update the route with calculated arc coordinates
route.features[0].geometry.coordinates = arc;
// Used to increment the value of the point measurement against the route.
var counter = 0;
map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route', {
"type": "geojson",
"data": route
});
map.addSource('point', {
"type": "geojson",
"data": point
});
map.addLayer({
"id": "route",
"source": "route",
"type": "line",
"paint": {
"line-width": 1,
"line-color": "#007cbf"
}
});
map.addLayer({
"id": "point",
"source": "point",
"type": "symbol",
"layout": {
"icon-image": "airport-15",
"icon-rotate": ["get", "bearing"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
});
function animate(featureIdx, cntr) {
// Update point geometry to a new position based on counter denoting
// the index to access the arc.
if (cntr >= route.features[featureIdx].geometry.coordinates.length-1){
return;
}
point.features[featureIdx].geometry.coordinates = route.features[featureIdx].geometry.coordinates[cntr];
point.features[featureIdx].properties.bearing = turf.bearing(
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr - 1 : cntr]),
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr : cntr + 1])
);
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of animation so long the end has not been reached.
if (cntr < steps) {
requestAnimationFrame(function(){animate(featureIdx, cntr+1);});
}
}
document.getElementById('replay').addEventListener('click', function() {
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
// Reset the counter
cntr = 0;
// Restart the animation.
animate(0,cntr);
animate(1,cntr)
});
// Start the animation.
animate(0, 0);
animate(1, 0);
});
.overlay {
position: absolute;
top: 10px;
left: 30px;
}
.overlay button {
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
}
.overlay button:hover {
background-color:#4ea0da;
}
body { margin:0; padding:0; }
#map { top:0; bottom:0; width:100%;height: 600px }
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Animate a point along a route</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'></script>
<div class="col-md-12">
<div class="card text-white">
<h5 class="card-header bg-info">Featured</h5>
<div class="card-body">
<div class="col-md-12">
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Leaflet.js - Create layers and add markers depending on geojson category data?

I have a .js file with coordinates for internships:
var internships = [{
"features": [
{"type":"Feature","properties":{"category":"entretient","Name":"green"},"geometry":{"type":"Point","coordinates":[50.807149, 3.162994]}},
{"type":"Feature","properties":{"category":"securité","Name":"blue"},"geometry":{"type":"Point","coordinates":[50.334421, 3.290146]}},
{"type":"Feature","properties":{"category":"secretaria","Name":"red"},"geometry":{"type":"Point","coordinates":[50.744787, 2.256216]}}
]
}];
I've found this bit of code allowing me to create layers depending on a property and here what my JS looks like:
$.getScript("CoordinatesPdC.js");
function mapLoad() {
var sécuritéLayer = new L.LayerGroup();
var secrétariatLayer = new L.LayerGroup();
var entretientLayer = new L.LayerGroup();
var map = L.map('map').setView([50.2910, 2.7775], 8);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, '
}).addTo(map);
var marker = L.marker([50.2910, 2.7775]).addTo(map);
var entretientLayer = L.geoJson(internships, {
filter: function (feature, layer) {
return (feature.properties.category === "entretient");
}
}).addTo(map);
var sécuritéLayer = L.geoJson(internships, {
filter: function (feature, layer) {
return (feature.properties.category === "sécurité");
}
}).addTo(map);
var secrétariatLayer = L.geoJson(internships, {
filter: function (feature, layer) {
return (feature.properties.category === "secrétariat");
}
}).addTo(map);
}
window.onload = mapLoad;
But now I have to create the markes assigned to these layers, how can I achieve that?

Your markers are already assigned to each later. In your example, you create a layer (with all of its markers) and immediately add it to the map using .addTo(map); Here's the code responsible for it.
var sécurité = L.geoJson(internships, {
filter: function (feature, layer) {
return (feature.properties.category === "sécurité");
}
}).addTo(map);
Now, you probably want to only display a certain layer based on user input. If so, I suggest adding the related layer to the map on a click event. Then when the event is triggered a layer is added. Here's the code for doing that. sécurité.addTo(map)
A layer is removed using map.removeLayer(sécurité);
Below is a working example based on your initial code. (I did write it in jQuery as my vanilla JavaScript could be better) You can also view it on jsFiddle here.
I left some comments in the code to explain what each part does. I hope that helps you with your understanding.
var internships = [{
"features": [{
"type": "Feature",
"properties": {
"category": "entretient",
"Name": "green"
},
"geometry": {
"type": "Point",
"coordinates": [3.162994, 50.807149]
}
},
{
"type": "Feature",
"properties": {
"category": "securité",
"Name": "blue"
},
"geometry": {
"type": "Point",
"coordinates": [3.290146, 50.334421]
}
},
{
"type": "Feature",
"properties": {
"category": "secretaria",
"Name": "red"
},
"geometry": {
"type": "Point",
"coordinates": [2.256216, 50.744787]
}
}
]
}];
$(document).ready(function() {
// Create an object to keep track of active layers and each layer with its markers
const layers = {
active: [],
entretientLayer: new L.LayerGroup(),
sécuritéLayer: new L.LayerGroup(),
secrétariatLayer: new L.LayerGroup(),
};
// create the map
var map = L.map('map').setView([50.8010, 3.1675], 6,5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, '
}).addTo(map);
// based on the category assign a marker to the layer
layers.entretientLayer = L.geoJson(internships, {
filter: function(feature, layer) {
return (feature.properties.category === "entretient");
}
})
layers.sécuritéLayer = L.geoJson(internships, {
filter: function(feature, layer) {
return (feature.properties.category === "securité");
}
})
layers.secrétariatLayer = L.geoJson(internships, {
filter: function(feature, layer) {
return (feature.properties.category === "secretaria");
}
})
// register click event
$('button').on('click', function(e) {
const layerName = e.target.name;
// if a layer is already active, remove it from the map and the active array
if (layers.active.includes(layerName)) {
layers.active = layers.active.filter(layer => layer !== layerName);
map.removeLayer(layers[layerName]);
} else {
// add the layer to the map and to the active array
layers.active.push(layerName);
layers[layerName].addTo(map);
}
});
});
#map {
height: 140px;
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet-src.js"></script>
<div class="button-group">
<button name="entretientLayer">entretient</button>
<button name="sécuritéLayer">sécurité</button>
<button name="secrétariatLayer">secrétariat</button>
</div>
<p></p>
<div id="map"></div>
UPDATE: updated leaflet.js to version 1.3.3.
The difference with the update is that each layer needs to be initialised using the new key word. Code is updated to reflect the change.

Google Maps forEach with setMap to set polyline visiblity (error: setMap is not a function)

I am trying to set the visibility of polylines based on a property. I use forEach to iterate over the features in the GeoJson data but when I try and call setMap on the array, I get type error: setMap is not a function. I have also tried pushing the resulting features into a new array with the same result.
map.data.loadGeoJson(
'data/trails2018.geojson', {},
function(features) {
console.log("loadGeoJson callback "+features.length);
map.data.forEach(function(feature) {
var skill = feature.getProperty('skill_leve');
if (skill == 'ADVANCED'){
feature.setMap(null);
}
});
});

You control the visibility of features on a Data Layer with the style property visible.
map.data.setStyle(function(feature) {
var visible = false;
if (feature.getProperty('skill_level')) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
visible = true;
}
}
return /** #type {google.maps.Data.StyleOptions} */ ({
strokeColor: "blue",
visible: visible
});
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(-23.55865, -46.65953),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var features = map.data.addGeoJson(geoJson);
console.log("addGeoJson returns " + features.length);
map.data.forEach(function(feature) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
// feature.setMap(null);
}
});
map.data.setStyle(function(feature) {
var visible = false;
if (feature.getProperty('skill_level')) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
visible = true;
}
}
return /** #type {google.maps.Data.StyleOptions} */ ({
strokeColor: "blue",
visible: visible
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": 1,
"skill_level": "ADVANCED"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-43.48283, -23.02487],
[-43.65903, -23.55888]
]
}
},
{
"type": "Feature",
"properties": {
"id": 2,
"skill_level": "BEGINNER"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-46.65953, -23.02487],
[-46.65903, -23.55888]
]
}
}
]
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Mapbox popup ReferenceError: features is not defined

I'm trying to display 3 fields properties from a geojson data that is loaded from a file. The data is loaded an added to the map. And the markers/points are display on the HTML page. BUt then I click on a marker/point nothing happens. Around .setLngLat(features.geometry.coordinates) I get an ReferenceError: features is not defined I'm not sure what I've missed or needed to do for it to be available to the current scope.
I would very much appreciate any hints or tips to resolve this.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title></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.37.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.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.myaccesstoken';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [10.600, 55.900],
zoom: 6.0,
hash: true
});
map.on('load', function () {
// Add a layer showing the places.
map.addSource('markers', {
type: 'geojson',
data: '{% static 'json/architecture_map.geojson'%}'
});
map.addLayer({
"id": "places",
"source": "markers",
"type": "circle",
"paint": {
"circle-radius": 5,
"circle-color": "#fb05ff"
}
});
map.on('click', function (e) {
var f = map.queryRenderedFeatures(e.point, {layers: ['places']});
if (f.length) {
var feature = f[0];
new mapboxgl.Popup()
.setLngLat(features.geometry.coordinates)
.setHTML(ProjectPopup(feature))
.addTo(map);
}
});
function ProjectPopup(feature){
var html = '';
html += "<div>";
html += "<h2>" + feature.properties.project + "</h2>";
html += "<p>" + feature.properties.image + "</p>";
html += "<a>" + feature.properties.slug + "</a>";
html += "</div>";
return html;
}
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'places', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'places', function () {
map.getCanvas().style.cursor = '';
});
});
</script>
</body>
</html>
Sample of the geojson file.
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4326"
}
},
"features": [
{
"type": "Feature",
"properties": {
"image": "project01.JPG",
"project": "Project Title",
"slug": "project-title"
},
"geometry": {
"type": "Point",
"coordinates": [
9.932241438432886,
57.04649628721196
]
}
}
]
}

First of all your provided geojson is not a valid one. You can check your geojson here: http://geojsonlint.com/
Second your "not defined" error might just be a typo. You defined your variable like this:
var feature = f[0];
But using is like this:
new mapboxgl.Popup()
.setLngLat(features.geometry.coordinates)
.setHTML(ProjectPopup(feature))
.addTo(map);
}
You notice that features is not the same as your defined variable named feature thus resulting in undefined.
I corrected your mistake. See here:
https://jsfiddle.net/andi_lo/xzrzzzsc

Categories

Resources