I am building a map using the Google Maps API and have hit a snag. In the table I have a column that labels the iconName for each marker ('mStyle', it's col3). In the following code I am trying to set the icon style based on the column values, and I've tried many, many different iterations that haven't worked. Including this one.
What has perplexed me, is that replacing iconStyler:{} with iconName: 'grn_blank' (or whatever) does work. The documentation for markerOptions is here: https://developers.google.com/fusiontables/docs/v1/reference/style
var layer = new google.maps.FusionTablesLayer();
layer.setOptions
(
{
query:
{
select: "col0",
from: "1UtgWf_kgwI3iUtrWvH3vIbxJfBdutl9oR8Wjqhiv",
where: ""
},
styles:
[{
markerOptions:
{
iconStyler:
{
kind: 'fromColumn',
columnName: 'mStyle',
}
}
}]
}
);
The code can be accessed here: https://drive.google.com/file/d/0BxeBEc_dsbUqWVJwbV9JTXRvb2s/edit?usp=sharing
The way the map should look is about 800 flags in the DC area, in various colors (red, purple, blue, green, light blue, and white). They represent schools. I can make it work in the browser-based editor, but I am adding dynamics once I get this piece to work, so I need it to work in Javascript.
Thanks
Click on the map tab in the fusion tables UI, select "Publish", "Get HTML and Javascript".
In that code grab the layer definition:
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col0",
from: "1UtgWf_kgwI3iUtrWvH3vIbxJfBdutl9oR8Wjqhiv",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
you want the styleId and templateId defined there (looks like 2 and 2 to me).
Related
I want to show the countries' boundaries in the Vuelayer (a vue library for openlayer package). But It doesn't work
I used the following website to generate GeoJson of all the countries. https://geojson-maps.ash.ms/
I followed the documentation https://vuelayers.github.io/#/component/polygon-geom
I used the for loop to get each coordinate to get boundaries of all countries, but it doesn't work.
When I use one coordinate of one country without for loop, it works
<vl-layer-tile>
<vl-source-osm></vl-source-osm>
</vl-layer-tile>
<vl-feature id="polygon">
<vl-geom-polygon v-for="(data, index) in geoJSON" :coordinates="data.geometry.coordinates"></vl-geom-polygon>
</vl-feature>
import countrieslowJson from "../assets/GeoJSON/counties_lowRes.json";
Vue.use(VueLayers);
export default {
components: {},
data() {
return {
zoom: 3,
center: [-98.8449,19.6869],
rotation: 0,
geolocPosition: undefined,
geoJSON: countrieslowJson.features.properties
};
},
props: [],
methods: {}
};
I want it to show all the boundaries of countries. but it doesn't show anything
I'm building a web app with Mapbox-GL-JS and it uses mapbox studio tilesets to add layers as choropleths. However when I access the layer, multiple features seem to be receiving the same ID.
https://github.com/mapbox/mapbox-gl-js/issues/8284
Here it was mentioned that it was due to my data, however there is no ID field in the dataset:
https://www.dropbox.com/s/5ci0hosqakvdahx/townships.json?dl=0
https://jsbin.com/cuhewomepo/1/edit?html,js,output
map.on("mousemove", "gemeentes", function (e) {
if (e.features.length > 0) {
if (hoverGemeenteId) {
map.setFeatureState({
source: 'gemeentes-src',
sourceLayer: 'townships-0u4ffk',
id: hoverGemeenteId
}, {hover: false});
}
hoverGemeenteId = e.features[0].id;
console.log(hoverGemeenteId);
map.setFeatureState({
source: 'gemeentes-src',
sourceLayer: 'townships-0u4ffk',
id: hoverGemeenteId
}, {hover: true});
}
});
Which follows the project example:
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
Whenever a township is hovered it changes color, however since there are multiple townships with the same ID, multiple areas light up instead of just the one that is hovered.
EDIT:
When I run the following code:
const filtered = map.querySourceFeatures('gemeentes-src', {
sourceLayer: 'townships-0u4ffk',
filter: ['>=', ['id'], 0]
});
It shows clearly that there are multiple features with the same id and no ID goes above 249. It's almost as if there is a 250 cap and new features just start at 0 again.
When adding a source, you can use the option promoteId to assign unique IDs to features based on a property.
https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector-promoteId
For example (from the PR that added this feature to MapboxGL):
map.addSource('counties', {
"type": "vector",
"url": "mapbox://mapbox.82pkq93d",
"promoteId": {"original": "COUNTY"}
});
...
map.setFeatureState({
source: 'counties',
sourceLayer: 'original',
id: 'Marin County' // reference a feature by a county name for feature-state
}, {hover: true});
recently I am developing a game using Phaser.js, I have come to need my tile map objects and I have come to see this video.
The only problem is that the "sprites make objects" seeing this example, this method is used map:
map.createFromObjects('Object Layer 1', 34, 'coin', 0, true, false, coins);
Where 34 is the "gid" ... How can I add this value to JSON? Because when creating the tilemap and objects, no object is assigned a "gid". Do I have to set it manually ._. ?
I use Tiled Map Editor Can anyone help me?
I'm experiencing the same problem. I don't know a good solution, but I've just been manually adding in the gid, by opening the .json file with a text editor. Look for something that says
"name":(Your object layer name),
"objects":[
{
first object properties...
},
{
second object properties...
}
Now, for each object that you want to assign a gid, add this text to the top of it's properties.
"gid":(Desired gid),
It is important that you put the comma at the end.
Here is an example of one:
"name":"mainObjects",
"objects":[
{
"gid":34,
"height":32,
"id":6,
"name":"",
"properties":
{
},
"rotation":0,
"type":"fire",
"visible":true,
"width":32,
"x":352,
"y":1248
},
{
"gid":34,
"height":32,
"id":7,
"name":"",
"properties":
{
},
"rotation":0,
"type":"fire",
"visible":true,
"width":32,
"x":384,
"y":1248
}],
Notice how for each object I added the "gid" property, and assigned it a value of 34, this value can be whatever you want though.
Now this will be annoying, because each time you export the tiled map, it removes the gid. Like I said, this isn't a great solution, but it will work until someone can respond with a better one.
#weastie Yes, it is an acceptable solution. However, if I have 20 or 100 objects could be torture. I have come to a solution and it is this and maybe you can serve you and to other than this at this juncture.
function create() {
...
map = game.add.tilemap('map');
map.addTilesetImage('ground_1x1');
map.addTilesetImage('walls_1x2');
map.addTilesetImage('tiles2');
...
map.objects.Objects.forEach(function(element) {
element.gid = 34;
}, this);
...
map.setCollisionBetween(1, 12);
layer = map.createLayer('Tile Layer 1');
layer.resizeWorld();
map.createFromObjects('Object Layer 1', 34, 'coin', 0, true, false, coins);
}
map.objects
is the object that has the array of objects ("Object Layer 1"). All you have to do is access the array name and modify each object with a foreach. It is a simple way ...
I have a map of the United States rendered in Highmaps, with enableDoubleClickZoomTo set to true. I've gotten stuck trying to discern what state a user has double clicked on to zoom the map, and wondered if there was information buried in the redraw event that would help me calculate this.
Here's a fiddle of the issue: http://jsfiddle.net/tjnicolaides/x8q1d1cs/
$('#container').highcharts('Map', {
chart: {
events: {
redraw: function (event) {
console.log(event);
console.log(this.getSelectedPoints());
}
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
series: [{
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: 'hc-key',
allowPointSelect: true,
states: {
hover: {
color: '#BADA55'
},
select: {
color: 'purple'
}
}
}]
});
When I console.log event after double clicking on a state, I'm getting a large object with information about the state of the entire chart.
If I single click to select a state, and then double click to zoom in on it, I get information about the state from this.getSelectedPoints() - however, it is not reasonable to expect that anything will be selected prior to zooming. In some maps, it may be disabled altogether. I included it here as a demonstration of the type of output I was originally hoping to get from redraw. Calculating a postal code, state name, or index to filter the original series with would be acceptable.
I think the easiest way to detect that point by wrapping Pointer.onContainerDblClick, like this:
(function (H) {
H.wrap(H.Pointer.prototype, "onContainerDblClick", function (p, event) {
console.log(this.chart.hoverPoint); // hovered point - may not exist, e.g. when clicking on the blank space
p.call(this, event);
});
})(Highcharts)
And live demo: http://jsfiddle.net/x8q1d1cs/8/
I want to implement this example http://api.geoext.org/1.1/examples/feature-grid.html made of geoext and openlayers, that feature grid is populated of a geojson file
In my development I have a geojson file with utm format, this is a single feature of my file (the coordinates are utm)
{"geometry": {"type": "Point", "coordinates": [7535169.36, 402844.172]}, "type": "Feature", "properties": {"NOMBRE": "LA VICTORIA", "CODIGO": "1702"}, "id": "1702"}
I tried to show the points in my code, but I can't see anything, this is my code
// create feature store, binding it to the vector layer
store = new GeoExt.data.FeatureStore({
layer: vecCiudades,
fields: [
{ name: 'NOMBRE' },
{ name: 'CODIGO' }
],
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.HTTP({
url: "data/summits.json",
format: new OpenLayers.Format.GeoJSON({
ignoreExtraDims: true,
internalProjection: new OpenLayers.Projection("EPSG:900913"),
externalProjection: new OpenLayers.Projection("EPSG:4326")
})
})
}),
autoLoad: true
});
as you can see, I tried to specify the internal and external projection of the feature store, my implementation looks like the example of the link mentioned above, but when I select a city the map is located to a wrong place (the place is shown near south pole, but it has to be near south america)
Thanks in advance
For what reason FeatureStore..? Just define layer as following:
var vecCiudades = new OpenLayers.Layer.Vector('MyLayer', {
strategies:[new OpenLayers.Strategy.BBOX()],
isBaseLayer:false,
projection:new OpenLayers.Projection("EPSG:900913"),
styleMap:new OpenLayers.StyleMap(null),
transitionEffect:'resize',
protocol:new OpenLayers.Protocol.HTTP({
url: "data/summits.json",
format:new OpenLayers.Format.GeoJSON({
ignoreExtraDims:true
}),
readWithPOST:false,
updateWithPOST:false,
srsInBBOX:true
})
});
Also register following event on map:
map.events.register("moveend", this, function (e) {
vecCiudades.refresh({force:true});
});
That will reread GeoJSON anytime moved or zoomed map and request will contain bounding box of visible area so you can only send features that going to be visible not all of them.