Develop Reference

D3 map - How do I include SVG image files in JSON data to create custom location markers?

I'm trying to figure out how to include svg icon images in with my json data so the relevant icon will appear as a marker at the corresponding coordinates.
I've got the data in files separated by what shape of object was sighted (I'm mapping ufo sightings through the 20th century), and I created an svg image file for each shape as well.
I'm not sure what the best way is to connect the images to the data though. (I'm a relative beginner). here's a visual to help explain what I mean:
{ "date": "10/21/1989", "shape": "Triangle", "latitude": -41.05446, "longitude": -130.72728, "color": "violet" },
then I've got a corresponding 'Triangle.svg' icon in an 'icons' folder. I'm sure the solution is not a complicated one, I'm just not seeing it. Can anyone help?

It will be easier for you to switch from JSON to JS and use the following structure:
import TRIANGLE from '../path/to/triangle.svg';
const data = {
date: '10/21/1989',
shape: TRIANGLE,
latitude: -41.05446,
longitude: -130.72728,
color: 'violet',
}
In case you are receiving the data from an API, try to get the full name and the path to the public folder. So you can have your images referenced as:
<img src={process.env.PUBLIC_URL + '/triangle.svg'} /> // here change triangle for your shape, in a loop or the way you render them.
More info on the PUBLIC_URL: https://create-react-app.dev/docs/using-the-public-folder/

Display all business locations from Data Source URL in Bing Maps

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.

How can I get the shape of a Road Element using the Javascript API?

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.

Using Simile widget timeplot to overlay events on discrete data

I was given the task of finding a way to graph my company's manufacturing data from each batch of material (specifically density) with an overlay of process changes in some sort of timeline format. It needs to be easy for an end user to add new data and events. Doing a google search I found timeplot, which seems to do exactly the sort of thing I'm looking for.
My only issue with it is it seems to only be able to plot continuous data. I want to be able to have a scatter plot of my material properties with events similar to how timeplot implements them. From their example on that page, the plot information looks like this:
var plotInfo1 = [
Timeplot.createPlotInfo({
id: "Population",
dataSource: dataSource2,
timeGeometry: timeGeometry,
valueGeometry: geometry2,
lineColor: green,
dotColor: lightGreen,
showValues: true
}),
Timeplot.createPlotInfo({
id: "Immigration",
dataSource: dataSource1,
timeGeometry: timeGeometry,
valueGeometry: geometry1,
lineColor: blue,
dotColor: blue,
showValues: true
}),
Timeplot.createPlotInfo({
id: "Events",
eventSource: eventSource1,
timeGeometry: timeGeometry,
lineColor: red
})
];
Well, almost like that I switched around the event sources in my testing. Looking at the api script for this, it looks like I should be able to edit the lineWidth. But adding that parameter makes the script no longer plot anything.
Is there a way to do what I want? Is there a better tool for this? I was planning on writing a VBA macro to extract all my data from some excel files and dump them into the proper text and XML formats this application needs.

Polygons with GeoJson & Polymaps

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