I'm trying to use jvectormap to create a map of the US with markers. I want these markers to either be red or blue and I would like to specify which color goes to which marker manually (not using any sort of scale or overly complicated data visualization function). Is there a way to do this? The new jvectormap's API is way too abstract for me to easily implement this.
I've tried using the old jvectormap but it appears it is buggy and doesn't show the markers in the correct locations.
Here is an example of two different types of markers based on a third element in the list of markers called type. I essentially created another array called colors used for the values in the data series representation. The loop right before the map is created iterates through the list of markers and pulls out the type and decides what the color value should be based on the type.
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == 'call-center') {
colors[i] = 0;
}
else {
colors[i] = 1;
};
};
Similar setups can be achieved for different types if you add additional if statements.
Related
I'm trying to figure out how to set the markers to be a certain colour depending on what the value of the point is. So for example, if a point has a value between 0.1 and 1, I want the marker colour to be red.
This is how I'm initializing my chart:
this.chart = Anychart.line()
let dataSet = Anychart.data.set(this.graphData.data)
let mapping = dataSet.mapAs({x: "day", value: "risk"})
this.series = this.chart.line(mapping)
How do I apply individual marker styles to points that belong to the same series?
Mockup of what I mean:
Series markers don't support conditional filling via the function. There are two available solutions:
Create additional marker series. It supports conditional coloring via a function, for details check the live sample.
Use line series markers, but apply individual marker setting in the data. This approach is demonstrated in the live sample.
I am wanting to limit the users ability to create more than 2 polygons and more than 1 path. I can programmatically add or remove specific drawing tools, but what I can't seem to find any documentation on is counting the number of polylines or polygons that exist on a map.
Here is some pseudo code to demonstrate the intended use:
If exists > 2 polygons and exists < 2 polylines then
disable polygon drawing tool
else if exists < 3 polygons and exists > 1 polylines then
disable polyline drawing tool
else if exists > 2 polygons and exists > 1 polylines then
disable entire drawing tool
end if
Again, my question is specific to counting polygons and polylines on a map. Does the Google API have this capability?
Firstly: your if-elseif is more complicated than is required. If the limit is strictly 1 polyline at most, and strictly 2 polygons at most
if (n == 2) {
//switch off polygon drawing tool
}
if (m == 1) {
//switch off polyline drawing tool
}
if (n == 2 and m == 1) {
//switch off drawing tool
}
where
n is the count of polygons and
m is the count of polylines,
In other words, turning off the polyline drawing is independent of how many polygons there are, and vice versa.
As to keeping track of n and m...
Probably best to create an object - let's call it cf - and push each user-created object to it (if the user-created object is the type of object you want to count), and then switch off the drawing tool if the length of cf exceeds the limit you want to impose.
So
var cf=[];
/* stuff to draw things on the map, resulting in a new object called kk */
cf.push(kk);
if (cf.length>3){
// switch off the drawing tool
}
Since you want to impose different restrictions based on whether the object created is a polyline or a polygon, create 2 objects (say, cf1 and cf2) and push kk to cf1 if it's a polygon, and to cf2 if it's a polyline... and change the if statement to reflect the different tests.
Why not just iterate a counter rather than creating an object?
I'm assuming that there's a point to the drawing of the polygons and polylines, and that you want to use/save/export them.
With the approach I've outlined, cf1 and cf2 can contain everything about each polygon, not just their geometry - the user who generated them, summary information about them, and all the other things you might like to store/export/display.
If none of that is required, then a counter would work just fine.
inb4 'using cf.length is kinda non-canonical in the JS world'. Too bad. It works (except in corner cases that don't apply here) and it's parsimonious.
I am trying to get the current default Google Maps Icons.
I am making a program with the Google Maps API and have set my DirectionsRenderer to suppress markers so I can make markers to set the specific icon.
This is my current result:
This is what I had before suppressing the default markers:
Later in my program I will be adding waypoints so I would like to set markers like the ones above with the letter A, B, C, etc. with a different color, (like marker "A", which is green).
I have visited several sites such as:
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined
https://www.google.com/fusiontables/DataSource?dsrcid=308519#map:id=3
google maps v3 standard icon/shadow names (equiv. of G_DEFAULT_ICON in v2)
The markers these websites tell you to use, do not look the same as the current markers. I am wondering if there is a way to call the current "green marker a" just like in the fusion tables:
If so, how? Thanks!
When you take a look at the network-tab of the developer-tools you'll see that the URL for the green marker is:
https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1
//------------------------------------------------------------------------------------^
The letter may be defined via the text-parameter
(Note: there is also a color-parameter, this parameter is used for the text-color and not for the background of the marker)
This post was old. I hope my answer that will help people to do that.
for (var i = 0; i < listMarkers.length; i++) { //loop markers
if (listMarkers[i].icon) { // if icon is set
listMarkers[i].setIcon(); //set default
break;
}
}
I have a student who is using MapBox.js (v1.6.0) to display some tiles that they made in TileMill. These tiles use the Tooltip functionality provided by TileMill (documentation) to add some interactivity. My student is also using a MapBox Streets layer to give some detailed views of roadways, etc. The problem is, when I use both of these layers together in the map, the interactivity from the tiles doesn't work.
Here is the code that doesn't work:
var map = L.mapbox.map("map");
var tilesOSM = L.mapbox.tileLayer("username.id1");
var tilesTileMill = L.mapbox.tileLayer("username.id2");
map
.addLayer(tilesOSM)
.addLayer(tilesTileMill)
.setView(L.latLng(61, -160.5), 4)
.setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));
We have tried several iterations of this code, but the only way we can get it to work is by using the L.mapbox.map(3) method and then using the _ insertAtTheBottom_ parameter of the L.map.addLayer() function.
var map = L.mapbox.map("map", "username.id2", {});
map
.addLayer(L.mapbox.tileLayer("username.id1"), true)
.setView(L.latLng(61, -160.5), 4)
.setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));
My question is three fold.
What is the difference between these two implementations?
Why is the tileLayer created using L.mapbox.tileLayer() different than the one created and automatically added using L.mapbox.map(3)?
Are there plans to address this discontinuity in future changes to the API or will support for interactive tiles be dropped in TileMill 2?
What is the difference between these two implementations?
If you check out what L.mapbox.map does internally, it adds a gridLayer and gridControl for the layer you specify. Basically the map constructor makes all of the safe assumptions it could make and does them automatically as a convenience.
Why is the tileLayer created using L.mapbox.tileLayer() different than the one created and automatically added using L.mapbox.map(3)?
It's the same - there's a gridLayer and gridControl in the mix when you use L.mapbox.map(3), and those are what make things interactive.
Are there plans to address this discontinuity in future changes to the API
It's not as much a discontinuity than an API design: we decided to keep tileLayers decoupled from gridLayers and gridControls so you can mix & match them - if you want to switch which layer interactive features come from, or disable interactivity without disabling the tile layer, you can.
will support for interactive tiles be dropped in TileMill 2?
No, you can use TileMill 2 and see how it supports interactivity. We aren't going to remove or phase this out, though vector tiles will have new methods of interaction.
For your second example, you would want something like:
var map = L.mapbox.map("map", "username.id2", {});
var gridLayer = L.mapbox.gridLayer("username.id1").addTo(map);
var gridControl = L.mapbox.gridControl(gridLayer).addTo(map);
map
.addLayer(L.mapbox.tileLayer("username.id1"), true)
.setView(L.latLng(61, -160.5), 4)
.setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));
I am trying to learn how to use the Javascript library leaflet along with d3 to create various map visualisations.
I have been following this tutorial which creates a choropleth map of the United States with some interactivity. This provides some of what I need, but the main functionality I want is to have a list of lat/long coordinates classified according to which region they belong to.
This would mean, in the tutorial map for example, if I had a lat long value (55, -3) which fell within the state of Arizona's polygon, the program could classify this point as belonging to Arizona.
Is there a function in the leaflet (or d3) library which will allow me to enter a lat long coordinate as a parameter and return the name of the feature it belongs to? The tutorial above allows you to attach a function to every feature via the onEveryFeature property and can fire mouseover events when each feature is hovered over. Surely there is a way to extend this functionality to numerically entered data instead of mouse points?
Leaflet would need some tweaking if you wish to do this. It leaves the handling of mouseclicks to the browser and therefore does not need logic for determining if a point lies inside a polygon.
I am not very knowledgeable about d3 but it's not glaringly obvious to me how it'd do this out of the box. Looking at the polygon code, I do find a clipping algorithm and intersection of infinite lines.
If you add a third library, however, this should be rather simple.
The OpenLayers Geometry library can determine if a point lies inside a polygon.
EDIT: I got this to work, see also http://jsfiddle.net/VaY3E/4/
var parser = new OpenLayers.Format.GeoJSON();
var vectors = parser.read(statesData);
var lat = 36;
var lon = -96;
var point = new OpenLayers.Geometry.Point(lon, lat);
for( var i = 0; i< vectors.length; i++ ){
if(vectors[i].geometry.intersects(point)){
alert(vectors[i].attributes['name']);
}
}
Or you could use https://github.com/maxogden/geojson-js-utils , a bit more specific library. It looks like it knows how to read GeoJSON and it has a method gju.pointInPolygon. I've not tested it though.