I am trying to set the maxBounds so that a map cannot be panned outside of Los Angeles County. When I set try to use the it in either of the following ways, it does not restrict the panning of the map as desired:
function GetMap(){
//Instantiate a map object
var map = new atlas.Map("myMap", {
style: 'grayscale_light',
center: [-118.25, 34.0],
maxBounds: [-121, 31, -115, 37],
OR
map.setCamera({
maxBounds: [-121, 31, -115, 37],
});
I tried both methods and they are both working correctly. Not that your bounding box values are much larger than Los Angeles County. The following is a much tighter bounding box around that area. [-118.851303, 32.721998, -117.659286, 34.831255]
Note that this will still show a lot of area outside of LA county since the county boundary is not square. For reference: https://www.bing.com/maps?q=Los+Angeles+County&FORM=HDRSC6
Related
I used offset property of linelayer in azure maps but it didn't worked
var polylines = new atlas.layer.LineLayer(datasource2, null, {
strokeColor: 'DarkOrchid',
strokeWidth: ['sqrt',['sqrt',['to-number', ['get', 'count']]]]
,
filter: ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']],
});
You need to use the atlas.data.Curve class. This class allows you to create a curved line by specifying a set of control points. You can then add this curved line to a data source and render it using a line layer. Here is an example:
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
//Create a curved line and add it to the data source.
dataSource.add(new atlas.data.Curve([
[-73.972340, 40.743270],
[-74.004420, 40.756800],
[-74.013530, 40.722300]
]));
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'DarkOrchid',
strokeWidth: 5
}));
To curve a line there is a couple of options. If you want the line to follow the curvature of the earth, you can calculate the coordinates that form a geodesic path. There is a built-in method of this in the atlas.math namespace called getGeodesicPath. For example:
var line = new atlas.data.LineString([[-74.00667,40.754572],[-42.75286,-22.752037]]);
//Convert the coordinates to create a curved geodesic path.
line.coordinates = atlas.math.getGeodesicPath(line);
//Add line to data source.
datasource.add(line);
I would like to add a legend to my Heat Map Layer using LegendControl Module. I want to add StopColors in the legend using the number of points. However the HeatMapLayer color option only allows HeatMapDensity (0 to 1) in the data expression. How do we assign colors to HeatMapLayer using "interpolate" expression and the number of points ?
color: [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(0,0,0,0)',
0.2,
'royalblue',
0.4,
'cyan',
0.6,
'lime',
0.8,
'yellow',
1,
'red'
],
However adding ['get','point_count'] to the color throws error inplace of heatmap_density. How to create a legend and color the heat map based on number of points ? Thanks !
Sounds like you are trying to create a weighted heat map. Use the weight option. For example:
var layer = new atlas.layer.HeatMapLayer(datasource, null, {
weight: ['get', 'point_count']
});
I'm trying to find a map solution that is possible to highlight and click on various regions, one region would be Africa. I'm also looking for a solution that will work well with Angularjs.
I thought the Google Visualization Chart might be suitable. This allows the selection of regions using the region codes listed on the site.
I've tried adding a few regions, the only one I could get working was Australia (AU), the following don't work for me:
['Europe', 150],
['Western Asia', 145],
['Asia', 142],
['Africa', 002]
Here's the jsfiddle I'm using to test this.
Am I doing something wrong or is there an issue with the chart itself?
Thank you.
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Region Code', 'Continent', 'Popularity'],
['142', 'Asia', 200],
['150', 'Europe', 300],
['019', 'Americas', 400],
['009', 'Oceania', 600],
['002', 'Africa', 700]
]);
var options = {
resolution: 'continents'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
This jsfiddle shows how to do it:
I am using Google's Street View Static Image API. It works great, but I am wondering if it is possible to get meta data for the images I am saving, specifically the date. Is there anyway to know the date of the static image?
Thanks,
Lee
Yes, you can get the image date using the Google Maps Street View Service in JavaScript.
Briefly, you would need to go through the usual setup steps to get Google Maps working on your page, then you would do something akin to:
var sv = new google.maps.StreetViewService();
var berkeley = new google.maps.LatLng(37.869085,-122.254775);
sv.getPanoramaByLocation(berkeley, 50, function(data) {
console.log(data.imageDate);
});
data.imageDate will contain the date in YYYY-MM format.
You can use StreetViewService's both getPanoramaById and getPanoramaByLocation methods to obtain this data. Please see here.
var panoramaOptions = {
position: streetViewLocation,
pov: {
heading: 0,
pitch: 5,
zoom: 1
},
visible: true,
addressControl: false,
imageDateControl:true
};
I have a problem with WMS overlays in OpenLayers. Basically I just want to add data from a WMS server as an overlay and not as a base layer. This appears to be a very simple problem but I am unable to find a solution. If I set singleTile to true, the overlays appears over the whole map but you cannot zoom in. If it is set to false, only one tile is displayed at every zoom level. If I set it as a base layer, it works just fine but I really want the overlay solution so I can make it transparent and see the map behind it.
Demonstration of the problem, with a different dataset but the issue is the same:
http://jsfiddle.net/adbnC/2/
I think it might be related to some coordinate system issues but I am no expert so any help is appreciated.
Thanks a lot!
Here is the relevant section of the code that does not work as expected:
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000",
"http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false,
// Setting single tile to true will kind of work but than one
// cannot zoom in any more.
singleTile: false
}
);
I can't quite get what exactly is wrong here, but I think it has something to do with messed up reference systems. Here is a workaround:
Modified Jsfiddle.net
I changed the map projection to spherical mercator and now it seems to work fine for me:
var mapOptions = {
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m"
};
map = new OpenLayers.Map('map', mapOptions);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000", "http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false
});
map.addLayer(osm);
map.addLayer(pop_layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
Let me know if that helped!