I would like to show on Google Map using Javascript API v3 some markers. I have two types of data - vehicle positions and building positions. There's a lot of buildings but only few vehicles. I would like to use clustering algorithm for building markers but not for vehicles. Is it possible using offical Google JS API or using some external library?
If you can distinguish the two different types of markers then you can just do this for the markers regarding buildings (using https://github.com/googlemaps/js-marker-clusterer)
var buildingsMarkersArray = [];
...
buildingsMarkersArray.push(someMarker);
// when you are done creating markers then
var clusterOptions = {
imagePath: 'the/path/to/images/m'
};
var buildingsCluster = new MarkerClusterer(map, buildingsMarkersArray, clusterOptions);
This will cluster only the markers you provide.
Related
I am using HERE maps to calculate routes but I use Google maps to display the route. In v7 getRoutingService used to return
result.response.route[0].shape
which is an array of coordinates which I pass to google services to draw it on map.
Here is how it looks in V7:
var router = hServicePlatform.getRoutingService();
router.calculateRoute(
routingParameters,
function (result, err_extras) {
const routeShape = result.response.route[0].shape; // coordinates array
show_routePolyline(routeShape); // this draws the polyline on Google maps
}
);
Using HERE v8, getRoutingService doesnt seem to return any coordinates at all. Is there a way to get the coordinates in V8?
An encrypted polyline can be returned using the polyline function however this then needs to be decoded to output meaningful co-ordinates.
Referenced in the Migration guide here.
https://developer.here.com/documentation/routing-api/migration_guide/index.html
I have an app with features layers and graphics layers which don't have the same spatial reference (i.e 102110 and 4326).
My map has the same spatial reference as my features layers (102110).
I can't turn the spatial reference of my graphics layers (4326) into the one of my map and features layers.
Do you have any idea to help me ?
Thanks.
GraphicsLayer or FeatureLayer does not have any SpatialReference information in them. Spatial references are part of the geometry/graphic objects and Map also.
The SpatialReference of FeatureLayer matches with map:
When requests are made for features from a service, the map's spatial
reference will be included which tells the service to re-project
features before sending them to the client.
Whereas, GraphicsLayer are maintained entirely within the application. The developer needs to ensure that projections match before adding the graphics on the map. To change the projection system, you can use GeometryService, below is a sample.
require(["dojo/_base/array", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/SpatialReference"], function(GeometryService, ProjectParameters, array) {
var geometries = array.map(graphicsLayer.graphics, function(graphic){
return graphic.geometry;
});
var gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var outSR = new SpatialReference({wkid:102110});
var params = new ProjectParameters();
params.geometries = geometries ;
params.outSR = outSR;
params.transformation = transformation;
gsvc.project(params, function(projectedGeometries){
for(var i = 0; i < projectedGeometries.length;i++){
graphicsLayer.graphics[i].setGeometry(projectedGeometries[i]);
}
});
});
I'm currently trying to use google maps to first display a map of United States with the weather and cloud google map layers and then zoom into the user's location using geolocation google maps api. My problem right now is I am only able to display the map without any of the weather, cloud, or geolocation information and only using the iframe basic view mode maps api. I am fairly new to javascript but have a div with an id "map-canvas" in my body tags and a javascript file mapWeather.js in my head tags.
mapWeather.js:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.6,-95.665)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
You probably already know, but do note that this library has been deprecated and will stop working in June.
I am using mapquest for adding new locations with following code from Javascript API.
window.map = new MQA.TileMap( /*constructs an instance of MQA.TileMap*/
document.getElementById('map'), /*ID of element on the page where you want the map added*/
7, /*intial zoom level of the map*/
{lat:17.73, lng:83.3}, /*center of map in latitude/longitude */
'map'); /*map type (map)*/
var poi=new MQA.Poi({lat:data.lat, lng:data.lng});
map.addShape(poi);
Now, what I want is, the map should be center to the newly added POI instead of the default one. I think there might be some API for this, but so far I could not trace it out. Please help me.
You should use
map.setCenter({lat:data.lat, lng:data.lng});
It will work.
What you need to do is call the slideMapToPoint function against the map with the latLng property of your newly created poi object.
// Create new POI
var poi = new MQA.Poi({lat:data.lat, lng:data.lng});
map.addShape(poi);
// Centre the map to the given POI.
map.slideMapToPoint(map.llToPix(poi.latLng));
I am having the weirdest problem right now using the ArcGIS Javascript API (v2.4). I'm merely trying to create an instance of an ESRI topo map with an extent, and then add a layer.
Here is the code that works. I create an extent, then a map, then a streetmap layer and then finally add that layer.
var startExtent = new esri.geometry.Extent(-71.5, 42, -71, 42.5, new esri.SpatialReference({wkid:4326}) );
map = new esri.Map("map_canvas", { extent: startExtent,fitExtent:false });
var streetmap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
map.addLayer(streetmap);
However when I try and do the same thing with a separate server, it doesn't work.
var startExtent = new esri.geometry.Extent(-71.5, 42, -71, 42.5, new esri.SpatialReference({wkid:4326}) );
map = new esri.Map("map_canvas", { extent: startExtent,fitExtent:false });
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
I know that the faulty-layer's server works, because if I create a map with no extent, it shows the full world imagery server, so it appears that creating a map in with one layer and an extent works, while creating a map with a different layer but the same extent does not work.
Any ideas why?
In your second example, the layer is in web Mercator.
Try converting the extent from geographic to web Mercator before using it in the map constructor.
The easiest way to convert the extent is to use esri..geometry.geographicToWebMercator.