Javascript dynamically create image/icon (marker) from data - javascript

I want to display a map (Google maps initially) in a website (e.g. the position of some runners in an event/race), alongisde some markers with the initials of each runner. That is, depending on the data I get in JSON format:
data = [
{
"lat": 44.363,
"lng": 3.044,
"full_name": "Paul Cardiff"
}
{
"lat": 44.473,
"lng": 3.144,
"full_name": "Mark Zein"
}
...
]
I would like to represent the current position of each runner in the map with a marker identified by its initials (Mark Zein --> M.Z.). For instance (forgive me for this representation):
-----
|M.Z| _______________________road
----- --|-- /
|P.C| _________v________|
--|-- /
___v__________/
I know I can create a google.maps.Marker with a custom icon, but I am finding hard to create these icons dinamically based on data I receive (and that might change over time).
Is there a way to dynamically create images/icons from data? Or can you think of another way of generating these icons?
I've been doing some research but so far I didn't find something, so any help will be much appreciated!
Edited:
I am currently mocking the way I get the data, but the idea is to get the data from a socket. So what I have in my code right now is:
var json_socket = {
"lat": 44.363,
"lng": 3.044,
"full_name": "Paul Cardiff"
};
And how I add the markers:
var live_user = {lat: json_socket["lat"], lng: json_socket["lng"]};
var marker = new google.maps.Marker({
position: live_user,
map: map,
icon: "icon.png"
});

You can iterate over the array of markers with simple loop
I used the label to display the initials
var data = [{
"lat": 44.363,
"lng": 3.044,
"full_name": "Paul Cardiff"
} {
"lat": 44.473,
"lng": 3.144,
"full_name": "Mark Zein"
}
...
];
for (var i = 0; i < data.length; i++) {
var item = data[i];
var latLng = new google.maps.LatLng(item.lat, item.lng);
var initials = item.full_name.match(/\b(\w)/g).join('');
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: initials,
icon: "icon.png"
});
}

Related

Multiple waypoints in leaflet js

This is my code to create multiple waypoints.
I have an array with 'n' number of lattitude and longitude i want the route based on that lat,long.I don't want to use any hardcore data's in waypoints.
In waypoints array i want to use dynamic lattitude and longitude,how to use this?
var data = [
{
"title": 'Chennai',
"lat": '13.0827',
"lng": '80.2707',
"description": '',
"flag":'1'
}
,
{
"title": 'Ramapuram',
"lat": '13.0317',
"lng": '80.1817',
"description": ''
}
,
{
"title": 'Kanchipuram',
"lat": '12.8342',
"lng": '79.7036',
"description": '',
"flag":'1'
},
];
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var routeControl = L.Routing.control({
}).addTo(map);
routeControl.setWaypoints(data);
Here i have attached the image and this is my output,and also my expectation is i want to remove the center marker.i want to set the marker where i want.
Can anyone help me out?Now i have updated my code that i removed waypoints and i set the waypoints using setwaypoints function.Now i wantto remove the markers.
If I understand correctly, you want to draw a route along some waypoints and show markers only for start and end points. Also you want to prevent users from adding new waypoints. Create control like that:
L.Routing.control({
waypoints: yourWaypoints,
plan: L.Routing.plan(yourWaypoints, {
createMarker: function(i, wp, n) {
if (i == 0 || i == n - 1) {
return L.marker(wp.latlng, {
draggable: false // prevent users from changing waypoint position
});
} else {
return false;
}
}
},
addWaypoints: false // prevent users from adding new waypoints
});

Set Multiple markers with Angular 4 and google maps

Hello Everyone need Help setting Multiple markers to google map component in Angular 4. I can get a single Marker to show up with this code.
ngOnInit() {
const myLatlng = new google.maps.LatLng(40.748817, -73.985428);
const mapOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false
};
const map = new google.maps.Map(document.getElementById('map'), mapOptions);
const Marker = new google.maps.Marker({
position: myLatlng,
title: 'Hello World!'
});
// To add the marker to the map, call setMap();
Marker.setMap(map);
}
How can I modify this to show multiple locations. I have locations in from JSON like below.
{
"locations": [
{
"_id": "59eb784fa8e0be0004fb466e",
"updatedAt": "2017-10-21T16:39:43.338Z",
"createdAt": "2017-10-21T16:39:43.338Z",
"latitude": "0.2346285",
"longitude": "32.4352628",
"locationName": "Prime warehouse A",
"locationInfo": "Kampala Warehouse #001",
"__v": 0
},
{
"_id": "1568eb54560be000456466e",
"updatedAt": "2018-10-21T16:39:43.448Z",
"createdAt": "2016-09-11T16:39:43.338Z",
"latitude": "4.3346285",
"longitude": "32.4352628",
"locationName": "Prime warehouse A",
"locationInfo": "Kampala Warehouse #001",
"__v": 0
}
]
}
As long as you can access your locations array, then you can loop through it and from there create a marker each.
Here's a sample if you put everything in your ngOnInit function:
ngOnInit() {
let map;
const locations; // if you have your locations hard-coded, else just make sure it's accessible
const myLatlng = new google.maps.LatLng(40.748817, -73.985428);
const mapOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// loop through each object of your locations array
for (let location in locations) {
// The marker's position property needs an object like { lat: 0, lng: 0 };
// Number(location.latitude) is there to convert the string to a number, but if it's a number already, there's no need to cast it further.
let latLng = {lat: Number(location.latitude), lng: Number(location.longitude)};
// Set the position and title
let marker = new google.maps.Marker({
position: latLng,
title: location.locationName
})
// place marker in map
marker.setMap(map)
}
}
You can learn more about importing data into a Map with Google's official documentation
Hope that helps!

how to update javascript variable array from c#

am working with this array in javascript of marks to show all marks in the map as static work is perfect
var markers = [
{
"title": 'Aksa Beach',
"lat": '31.6227697895779',
"lng": '-4.998779296875',
"description": '/www.google.com">Read more</a>'
}];
but if i can add some marks from model in html view is my problem
#foreach (var item in Model) {
markers.push({
"title": item.name,
"lat": item.lat,
"lng": item.long,
"description": item.descript
});
}
Wrap the values with single or double quotes. Also since item is a C# variable, you need to use #. You also need to use <text> tag as you are mixing C# code and plain text (js code)
<script>
var markers = [];
#foreach (var item in Model) {
<text>
markers.push({ "title": "#item.name",
"lat": "#item.lat",
"lng": "#item.long",
"description":"#item.descript"
});
</text>
}
</script>

TurfJS Add Point to MapBox Map

New to Turf JS and have been looking at integration via the MapBox API. Using the default MapBox.Outdoors map and have been following some of the example TurfJS documentation http://turfjs.org/docs/#point but can't seem to get my point plotting on top of the map. Any suggestions greatly appreciated, the error seems to be in my list line of code in relation to the FeatureLayer.setGeoJSON but I can't figure it out. If I leave the last line active the map doesn't load, if I comment it out the map loads but no pin shows up?
<BODY>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFya2d1ayIsImEiOiJjaXNsd2VhMG8wMDdrMzNybmticDJhdnZsIn0.KXcvejg6QplSsAlj8aimjA';
var point = turf.point([35.463453, -97.514914], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
.featureLayer.setGeoJSON(point); // If I comment this line out the map loads with no pin. If I leave this line active the map doesn't load at all?
</SCRIPT>
</BODY>
I think the problem is that you're trying to add geojson to the map without converting it first. You need to convert the geojson to a format that leaflet can use. Here is an example that should work for you. It will also bind a popup to the point marker that will display the properties for you. The style part can be done either statically (like for all properties except title) so that it would be applied to all points within the feature collection, or dynamically using each features properties (as is done with title).
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
var featureCollection = {"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"title": "OKC Thunder"}, "geometry": {"type": "Point", "coordinates": [35.463453, -97.514914]}}]};
L.geoJson(featureCollection, {
onEachFeature: function (feature, layer) {
layer.bindPopup(""+feature.properties+"<br />");
},
style: function (feature) {
style = {
"title": feature.properties.title,
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
};
return style
}
}).addTo(map)
I think you should use the set marker function that mapbox makes available to you. So you can skip creating a feature layer and just use the mapbox-marker function. It is documented here:
https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/
There is also a description of how to create a simple marker here:
https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/
For the code you provided you could just skip the creation of a geojson object via turf.point and just use this:
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker([-97.514914, 35.463453], {
icon: L.mapbox.marker.icon({
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
})
}).addTo(map);
Or if you want to use geojson with turf.point you could also do it that way:
var point = turf.point([-97.514914, 35.463453], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});
var coords = point.geometry.coordinates;
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker(coords, {
icon: L.mapbox.marker.icon(point.properties)
}).addTo(map);
Also make sure that you need to flip your point coordinates from
[35.463453, -97.514914] to [-97.514914, 35.463453] to match the geojson specification which is "projected coordinates, longitude, latitude for geographic coordinates"
http://geojson.org/geojson-spec.html#id2

Iterating over an array of objects?

Here is some sample data that I get from an API:
{
"Document": {
"Placemark": [
{
"name": " V5-MJW",
"address": "Aviation Road, Windhoek, Namibia",
"description": [],
"TimeStamp": {
"when": "2016-05-21T06:12:00-04:00"
},
"styleUrl": "#asset7541",
"Point": {
"coordinates": "17.0829055,-22.598271,743"
}
},
{
"name": "GSatMicro80149",
"address": "Unnamed Road, Lesotho",
"description": [],
"TimeStamp": {
"when": "2016-05-11T04:52:00-04:00"
},
"styleUrl": "#asset7543",
"Point": {
"coordinates": "27.5594894,-29.456703,1659"
}
}
]
}
}
This is my current code that is creating an array:
var flightPlanCoordinates = [];
//data being the returned values from the API.
$.each(data.Document.Placemark, function () {
var location = this.Point.coordinates.split(',');
var loc = {lat: parseFloat(location[1]), lng: parseFloat(location[0])};
flightPlanCoordinates[this.name] == null ? flightPlanCoordinates[this.name] = [] : flightPlanCoordinates[this.name].push(loc);
});
I get a lot of placemarks with the same name, I want to split each placemark with a different name into a different array.
This all works fine until I try to itterate over flightPlanCoordinates, I tried the following:
$.each(flightPlanCoordinates, function(index) {
}
But this does not work, If I log the length of flightPlanCoordinates, it results in 0, yet in Firefox Dev tools I can see the correct values inside of flightPlanCoordinates.
How would I go about doing this? Is there a better way than what I am doing here?
Please change
var flightPlanCoordinates = [];
to
var flightPlanCoordinates = {};
it should be an object, because you set it with properties like flightPlanCoordinates[this.name], where this.name is a string, not an index.

Categories