Here API clustering error: "addLayer is not defined"
Error I am calling the function startClustering, but I get a error map.addLayer is undefined.
I think maybe the map object lost the context scope, but how can I could pass the right scope to have access to addLayer function from the map.
//Boilerplate map initialization code starts below:
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {
center: {
lat: -19.9211375,
lng: -43.9490617,
},
zoom: 6
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// create default UI with layers provided by the platform
var ui = H.ui.UI.createDefault(map, defaultLayers, 'pt-BR');
function startClustering(map, data) {
var dataPoints = data.map(function (item) {
return new H.clustering.DataPoint(item.coords.lat, item.coords.lng);
});
var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {
eps: 32,
minWeight: 2
}
});
var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
map.addLayer(clusteringLayer);
}
startClustering(map, travelData);
I was not able to reproduce the "addLayer is not defined" error you observed. Since you did not provide a full listing (for example, travelData is not defined), I suspect the issue may not be demonstrated in the code sample to help you debug.
It looks like you followed the clustering example from the documentation:
https://developer.here.com/api-explorer/maps-js/v3.0/clustering/marker-clustering
There is no need to wrap it in a function though if you suspect a scoping issue. For example this works for me:
var platform = new H.service.Platform({
'app_id': 'your-app-id',
'app_code': 'your-app-code',
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('map'),
defaultLayers.normal.map, {
center: {lat: -19.9211375,
lng: -43.9490617},
zoom: 6,
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers, 'pt-BR');
var travelData = [
{lat: -19.8211, lng: -43.9490617},
{lat: -19.7211, lng: -43.9490617},
{lat: -19.6211, lng: -43.9490617},
{lat: -19.5211, lng: -43.9490617},
{lat: -19.4211, lng: -43.9490617},
{lat: -19.3211, lng: -43.9490617},
];
var dataPoints = travelData.map(function(item) {
return new H.clustering.DataPoint(item.lat, item.lng);
});
var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {eps: 32, minWeight: 2 }
});
var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
map.addLayer(clusteringLayer);
It's not exactly the same as I simplified travelData a bit so it may depend on your dataset. Also make sure you are including the mapjs-clustering.js script in your HTML, though you'd see an error like "H.clustering is undefined" if that were the issue.
Related
I want to add text to a marker. I have a variable with an attribute "text" that I want to appear in the Marker, when it appears on the map.
var baseLat = baseLocation.lat;
var baseLng = baseLocation.lng;
var basePoint = new H.geo.IPoint( baseLat , baseLng );
var baseMarker = new H.map.DomMarker( basePoint );
var markerHTML = '<div class="px_marker">' + baseLocation.text + '</div>';
baseMarker.setZIndex(1);
baseMarker.setData(markerHTML);
domGroup.addObject(baseMarker);
baseLocation.text = "test"
I would expect a marker with the word "test"
While creating map object, you can specify the coordinates and icon both as parameters, and in icon, you can embed both the text and animation, if is required.
please refer following example which illustrates the same requirement
developer.here.com/api-explorer/maps-js/v3.0/markers/map-with-dom-marker
Also a little code snippnet that could help..happy coding..!!
<html>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': ‘xxxxxxxxxx’,
'app_code': ‘yyyyyyyyyyy’
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
// Define a variable holding SVG mark-up that defines an animated icon image:
var markerHTML = '<div>' + "text" + '</div>';
// Create an icon object, an object with geographic coordinates and a marker:
var icon = new H.map.DomIcon(markerHTML),
coords = {lat: -22.8906, lng: -43.2283},
baseMarker = new H.map.DomMarker(coords, {icon: icon});
// Set map center and zoom, add the marker to the map:
map.setCenter(coords);
map.setZoom(18);
map.addObject(baseMarker);
</script>
</html>
I want to put markers to the specific cities that I chose but I need to do it in a for loop, manually going through the process is time-consuming and looks quite ugly on the code. Any tips to use a for loop correctly? What am I doing wrong here?
var izmir = {lat: 38.4237, lng: 27.1428};
var amsterdam = {lat: 52.3680, lng: 4.9036};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: izmir});
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: amsterdam});
var i;
for(i=0;i.length;i++)
{
nokta = new google.maps.Marker({position: izmir,amsterdam, map: map});
}
}
EDIT: I guess I've partly achieved what I wanted, only problem is that the marker is only used by the last entry, in this case it's Prague. If I change it to another city (e.g. Amsterdam), map is centered on Amsterdam and the marker is only used by Amsterdam. How can I use the marker on all?
var sehirler = {
'izmir': {lat: 38.4237, lng: 27.1428},
'amsterdam': {lat: 52.3680, lng: 4.9036},
'prague': {lat: 50.0755, lng: 14.4378}};
function initMap() {
for (var sehir in sehirler)
{
var map = new google.maps.Map(document.getElementById('map'),
{zoom: 4, center: sehirler[sehir]});
var marker = new google.maps.Marker({position: sehirler[sehir], map: map});
}
}
EDITED based on discussion below
is this what you're looking for?
// initialize object containing all cities
var sehirler = {
izmir: { lat: 38.4237, lng: 27.1428 },
amsterdam: { lat: 52.368, lng: 4.9036 },
prague: { lat: 50.0755, lng: 14.4378 }
};
function initMap() {
// initialize main map
var center = sehirler.CITY // <-- edit CITY to be the correct city
var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: center });
// iterate throughout cities to put all markers on same map
for (var sehir in sehirler) {
var marker = new google.maps.Marker({ position: sehirler[sehir], map: map });
}
}
I have three javascript functions.
The main function is within script tags in my index.html file.
I have two other functions that are in an external file named cities.js.
Beneath is the main function found within the script tags:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: coords,
mapTypeId: 'terrain'
}
This is for the Google Maps API.
The next two functions hold the coordinates for the map.
function ldn() {
var coords = var coords = {lat: 51.509865, lng: -0.118092};
}
function birm() {
var coords = {lat: 52.509865, lng: -0.2};
}
Essentially, I have a drop down box and when either 'ldn' or 'birm' is clicked, the functions in the external file are executed depending on which one is clicked.
I wish to take the coordinates within the functions and include them into the main function for the 'center' variable.
I hope this makes sense! I have tried calling the function in center (center: birm()) but it does not work as intended. Simply returning the coords doesn't work either.
If you want to change the Map object with the click of a button and it doesn't have a method to do so, you have to recreate it.
With the code below the map gets initialised to the new position using your functions:
var defaultCoords = {
lat: 52.509865,
lng: -0.2
}
function initMap(coords) {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: coords || defaultCoords,
mapTypeId: 'terrain'
});
}
function ldn() {
var coords = {
lat: 51.509865,
lng: -0.118092
};
initMap(coords);
}
function birm() {
var coords = {
lat: 52.509865,
lng: -0.2
};
initMap(coords);
}
But if there is a method to apply new coordinates (.setCenter()) to the map you have to store the object outside of initMap():
var defaultCoords = {
lat: 52.509865,
lng: -0.2
}
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: defaultCoords,
mapTypeId: 'terrain'
});
}
function ldn() {
var coords = {
lat: 51.509865,
lng: -0.118092
};
map.setCenter(coords);
}
function birm() {
var coords = {
lat: 52.509865,
lng: -0.2
};
map.setCenter(coords);
}
The initMap is only run once to initialize the map.
If you want to recenter it later based on your choices use
function ldn() {
var coords = {lat: 51.509865, lng: -0.118092};
map.setCenter(coords);
}
function birm() {
var coords = {lat: 52.509865, lng: -0.2};
map.setCenter(coords);
}
This assumes that the map variable is global.
I want to create a map from the values I get from my database using this tutorial.
I'm sure that the values in my jsp are double, but they are not shown in my map (it appears grey).
This is my jsp:
<c:if test="${tei.getLatitudine() != null}">
<span class="elemento">latitudine:</span>
<div id="latitudine">${tei.getLatitudine()}</div>
<br/></c:if>
<c:if test="${tei.getLongitudine() != null}">
<span class="elemento">longitudine:</span>
<div id="longitudine">${tei.getLongitudine()}</div>
<br/></c:if>
I'm trying differents approach:
function initMap() {
var latitudine = $("#latitudine").val;
var longitudine = $("#longitudine").val;
var uluru = {lat: latitudine, lng: longitudine};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
or:
function initMap() {
var latitudine = '${tei.getLatitudine()}';
var longitudine = '${tei.getLongitudine()}';
var uluru = {lat: latitudine, lng: longitudine};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
None of the two or other forms I'm using it works.
Thanks in advance for any help.
EDIT1:
The error in my console is:
InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number _.kb # js?key=AIzaSyCIVrSpAqIBx532NG59pY4biIuc5xQGgtA&callback=initMap:37 js?key=AIzaSyCIVrSpAqIBx532NG59pY4biIuc5xQGgtA&callback=initMap:37
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number _.kb # js?key=AIzaSyCIVrSpAqIBx532NG59pY4biIuc5xQGgtA&callback=initMap:37
but if I write in my jsp:
${tei.getLongitudine().getClass()}
it returns class double.
EDIT2:
If I wrote in my js:
var latitudine = ${tei.longitudine}
I get this error:
message: "initMap is not a function"
name: "InvalidValueError"
stack: "Error
at new Eb (https://maps.googleapis.com/maps/api/js?key=mykey(hidden4privacy)&callback=initMap:41:365)
at Object._.Fb (https://maps.googleapis.com/maps/api/js?key=mykey(hidden4privacy)&callback=initMap:41:475)
at Og (https://maps.googleapis.com/maps/api/js?key=mykey(hidden4privacy)&callback=initMap:96:420)
at https://maps.googleapis.com/maps/api/js?key=mykey(hidden4privacy)&callback=initMap:131:58
at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=mykey(hidden4privacy)&callback=initMap:21:5)
at https://maps.googleapis.com/maps/api/js?key=mykey(hidden4privacy)&callback=initMap:130:20
at https://maps.googleapis.com/maps/api/js?key=mykey(hidden4privacy)&callback=initMap:131:73"
If you have model like this;
public class MyModel{
private double longitudine;
public double getLongitudine() {
return longitudine;
}
public void setLongitudine(double longitudine) {
this.longitudine = longitudine;
}
}
and put request or session your model
MyModel d = new MyModel();
d.setLongitudine(24);
session.setAttribute("lng",d); // or
// request.setAttribute("lng",d);
then you can access properties using EL in JS like this.
function myFunction() {
var a = ${sessionScope.lng.longitudine}; /*or*/
/* var a = ${requestScope.lng.longitudine}; */
var b = a + 5;
console.log(b);
}
I have created three markers using Google Maps API. Is there a way that I can add an event listener to each marker so that they will work independently when the corresponding marker is active? I would like to display a message if the user is getting closer to a marker, specifically with bounds_changed. I want to continue giving the user a message until they get to a zoom level of say 5.
<script>
var map;
var score;
score = 0;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago,
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity,
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis,
});
if (score==0) {
chicagoMarker.setMap(map)
}
if (score==1) {
oklahomaCityMarker.setMap(map)
}
if (score==2) {
indianapolisMarker.setMap(map)
}
chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
async defer></script>
try this
google.maps.event.addListener(chicagoMarker, 'click', function(){
//do something
})