I'm a beginner at mapping and decided to use Polymaps for a project I'm working on. I have a dataset I want to serve to the map by zip code. We're testing with counties right now and all I'm trying to do is get the county shapes to show on the map.
I added the geoJson to the map, pulling in my .json file. After some research I think I need to parse the json but I'm not sure how to go about that and I couldn't glean much from the Polymaps documentation.
Any insight or beginner tutorials would be great. Thank you!
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.center({lat: 38.89859, lon: -77.035971})
.zoom(7)
.zoomRange([4, 7])
.add(po.interact());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/20760/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.geoJson()
.features([{"geometry":{"coordinates":paths, "type": "Polygon"}}])
.url("testCounties.json"));
I think you need to change this:
map.add(po.geoJson() .features([{"geometry":{"coordinates":paths, "type": "Polygon"}}]) .url("testCounties.json"));
to this:
map.add(po.geoJson().url("testCounties.json"));
Note that there is no space after geoJson(). And more importantly, you should use geoJson.features OR geoJson.url, not both. You would use geoJson.features if you had your geojson data stored locally in JavaScript, but because you are pointing to an external json file, you should just use geojson.url.
Perhaps this example is like what you're trying to do: http://polymaps.org/ex/population.html
Related
For a store locator, let's say I'm using Bing's example data source url: https://spatial.virtualearth.net/REST/v1/data/515d38d4d4e348d9a61c615f59704174/CoffeeShops/CoffeeShop
In Bing's example, the user has to search in order for the store locations to populate, which is fine if you're Starbuck's and you have thousands of locations, but business requirements are that we need to show all of our 10-15 locations on a map of the full United States.
It looks like there are plenty of modules for searching and finding all locations within a box, or finding nearby locations within a specified radius, clustering a lot of locations within the viewport, but I can't for the life of me figure out how to simply load all Contoso Coffee locations from the data source URL.
The closest answer that I could find is this:
Zoom to show all locations in bing maps
The chosen answer:
var locations = CurrentItems.Select(model => model.Location);
map.SetView(LocationRect.CreateLocationRect(locations));
But I could not get it to work. I've also tried:
var queryOptions = {
queryUrl: dataSourceUrl,
spatialFilter: {
spatialFilterType: 'nearby',
location: location,
radius: 1000
},
};
Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryOptions, map, function (results) {
...
});
This doesn't work because 1000 is the max radius and some of the my locations would be outside of it.
Other than that, I've been trying to find the exact module that reproduces vaguely what I'm looking for, but they keep coming up as dead ends.
I'm sure it's very simple, but the answer has eluded me. Thanks!
~Andrew
Instead of doing a radius search you can use a bounding box and page through the results if there is more than 250 (max results per query) by using the $top and $skip parameters. In theory you could download a full data source if you used a global bounding box and stepped through all results.
Here is an example: https://bingmapsv8samples.azurewebsites.net/#Load%20all%20results%20(parallel)
Just in case you hadn't noticed, the Contoso coffee data source is an example data source with fake coffee shop listings. It's primarily for testing/example use.
I want to highlight a specific section of a road on my map. The user should be able to click on a map and using the Location of the click, I want to highlight the closest road element.
In the Here Android SDK, the RoadElement can do exactly what I want: I can pass some coordinates and use getGeometry() to obtain the exact shape of the road element.
However, I couldn't find something similar to this in the javascript SDK. I tried using Reverse Geocoding:
var geocodingParams = {
lat: road.lat,
lng: road.lng,
mode: 'retrieveAddresses',
maxresults: '1',
additionaldata: ['IncludeShapeLevel', 'postalCode'],
prox: road.lat + ',' + road.lng
};
this.geoCodingService.reverseGeocode(geocodingParams, onResult, null);
This way, I can find the closest road, but I don't get accurate shape data. In the Results View, there is only the Bounding Box (Location.MapView.BottomRight and Location.MapView.TopLeft).
How can I achieve something similar to the RoadElements, using the Javascript API?
Our routing APIs return the shape points along a route. So given a set of start and stop waypoints the JavaScript SDK routing API will give the route shape.
Example code is included on this page:
https://developer.here.com/documentation/maps/dev_guide/topics/routing.html
Another alternative will be to use the Advanced fleet telematics API and look into the datasets yourself.
Context
I am working under Phaser (which is a Javascript Framework for game development) and I followed this totorial. All the code works perfectly. But to make the map the tutorial use a .json file which content a data part in order to display the map.
Problem
I would like to change the map and display my own map. Here is the map.json that display the map:
{ "backgroundcolor":"#000000",
"height":10,
"infinite":false,
"layers":[
{
"data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAADwAAAA8AAAAPAAAADwAAAA8AAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAA",
"encoding":"base64",
"height":10,
"name":"World",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
}],
"nextobjectid":31,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2018.03.21",
"tileheight":70,
"tilesets":[
{
"columns":4,
"firstgid":1,
"image":"tiles.png",
"imageheight":280,
"imagewidth":280,
"margin":0,
"name":"tiles",
"spacing":0,
"tilecount":16,
"tileheight":70,
"tilewidth":70
},
{
"columns":1,
"firstgid":17,
"image":"coinGold.png",
"imageheight":70,
"imagewidth":70,
"margin":0,
"name":"coin",
"spacing":0,
"tilecount":1,
"tileheight":70,
"tilewidth":70
}],
"tilewidth":70,
"type":"map",
"version":1.2,
"width":30
}
I know that the part used in order to display the map is layers.data.
What are these letters all about? Is is a kind of special format that I never heard about so far?
How can I should I know which letters correspond to which tiles?
If you need more informations or if you have any question please let me know, thanks !
That map was made using Tiled which allows you to make tiled maps using a set of tiles (aka sprites). Exporting it in json allows you to import it into game engines with ease, in this case, Phaser.
Doing these by hand could be troublesome so a tilemap editor like Tiles helps you accelerate your map development. You can also create and place each tile programmatically but it would depend on which type of game you're aiming at.
here's an introductory tutorial on how to use Tiled to create a map. Be sure to save it as json instead of .tmx so you can import it in phaser.
I need to creat a Tunisia map using Amcharts with my json data
Code in my json / id in tunisiaLow
nbre in my json / value in tunisialow
i change in tunisiaLow like my json data but not work
i need samthink like this
pic
pleas help me
this is my code in plunker plnkr.co/edit/6aDJREhcFYSfM5JW99mX?p=preview
The biggest issue with your code is that you modified the AmCharts map JS file in such a way that it completely breaks with the library. The JS files should not be modified unless you know what you're doing and follow the directions on creating your own map files tutorial. Your modified file removes the required id attribute that makes the map function.
Ideally you should modify your data to match the map format, not the other way around. Going by your last ticket, you seem to be unable to change your data, so the solution is the same as the last - remap your data to conform with AmCharts' format.
The original JS/SVG map has a list of IDs for each province. Since your dataset's titles don't exactly match the titles within the original map, you'll want to create a lookup object that uses your titles to link up to the internal map IDs, for example, using your French titles:
var areaDataMapping = {
"TUNIS": "TN-11",
"ARIANA": "TN-12",
"BEN AROUS": "TN-13",
"MANOUBA": "TN-14",
"NABEUL": "TN-21",
"ZAGHOUAN": "TN-22",
"BIZERTE": "TN-23",
"BEJA": "TN-31",
"JENDOUBA": "TN-32",
"KEF": "TN-33",
"SILIANA": "TN-34",
"KAIROUAN": "TN-41",
"KASSERINE": "TN-42",
"SIDI BOUZID": "TN-43",
"SOUSSE": "TN-51",
"MONASTIR": "TN-52",
"MAHDIA": "TN-53",
"SFAX": "TN-61",
"GAFSA": "TN-71",
"TOZEUR": "TN-72",
"KEBILI": "TN-73",
"GABES": "TN-81",
"MEDENINE": "TN-82",
"TATAOUINE": "TN-83"
};
From there, you can remap your parsed JSON file to create the correct area object array with the required properties such as id, title and value and then assign the result to your code:
var remappedAreas = AmCharts.parseJSON( areas ).map(function(area) {
return {
id: areaDataMapping[area.libelleFr],
title: area.libelleAr,
code: area.code,
value: area.nbre
}
});
var map = AmCharts.makeChart("...", {
// ...
"dataProvider": {
// ...
"areas": remappedAreas,
// ...
},
// ...
});
Here's an updated plunkr, which uses the official AmCharts JS for Tunisia instead of your version.
Has anyone noticed that google maps geocoding have changed the variable name of the lat and lng from, Qa and Ra to Pa and Qa.
Does anyone know a reason for this?
Edit: If you're using the Google Maps Geocoding Service, as #hamczu suggests, then you should be getting the results like this:
{
... snip ...
geometry: {
location: LatLng,
... snip ...
}
}
It sounds like you're not using the API methods for the LatLng object, but are instead trying to use its undocumented properties. Your question demonstrates one of the best reasons why this is a Bad Idea - the Google code is compressed and obfuscated, using short, arbitrary variable and property names, and Google may recompress its code at any time, arbitrarily changing these names. What it won't change is the function and attribute names in the published API - that's the whole point of having an API to begin with, and the reason why developers should code against the API, not the "undocumented features" of the currently available code.
So the best approach is to use the documented methods:
var lat = result.geometry.location.lat();
var lng = result.geometry.location.lng();
Otherwise, your code will likely break every time Google recompresses its code.