I got a code snippet below to display the boundary of an area from google map FusionTablesLayer. The polygon got displayed but the expected style never applied. What's wrong with my code? Please help me. Thank you alot.
var FT_TableID=420419;
var ftoptions = {
suppressInfoWindows:true,
styles: [
{polygonOptions: {fillColor:'#0040FF',fillOpacity:0.1,strokeColor:'#FF0000',strokeWeight:2,strokeOpacity:0.6}}
]
};
var layer = new google.maps.FusionTablesLayer(FT_TableID,ftoptions);
layer.setQuery('SELECT \'kml_4326\' FROM 420419 WHERE \'name_0\' = \'Vietnam\';');
layer.setMap(theMap);
Thank you for the suggestion. Let me clarify my case further, why I had to write the code that way: I stored ftquery for each area in the database (in the raw format: SELECT ... FROM ...) and loaded it out to draw the area boundary.
var ftoptions = {...};
var layer = new google.maps.FusionTablesLayer(tableid);
//to load custom styles, but not work, same for setOptions or set('styles',styles);
layer.setValues(ftoptions);
var ftquery = '';//this is loaded from database
layer.setQuery(ftquery);
layer.setMap(theMap);
I tried your suggestion but the polygon did not show. I must be wrong somewhere. Thank you all for any further help.
You are using the "old" style syntax. If you want to style the FusionTablesLayer, you need to use the documented syntax
var ftoptions = {
query: {
from: tableid,
select: 'kml_4326',
where: "name_0 = 'Vietnam'"
},
suppressInfoWindows:true,
styles: [
{polygonOptions: {fillColor:'#0040FF',fillOpacity:0.1,strokeColor:'#FF0000',strokeWeight:2,strokeOpacity:0.6 }}
]
};
var layer = new google.maps.FusionTablesLayer(ftoptions);
layer.setMap(theMap);
Related
I add DataPoints into Provider then into Layer which is bundled into the map.
Later I want to edit some of DataPoints, to do this I need to retrieve layer then provider from the map.
I try it by getting an array of layers but I won't know which one is a layer with my dataPoints.
let clusterDataProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {
eps: 16,
minWeight: 2,
strategy: H.clustering.Provider.Strategy.GRID
},
theme: {
getClusterPresentation: this.getClusterPresentation,
getNoisePresentation: this.getNoisePresentation
}
})
}),
let layer = hereMap.getLayers().asArray().find(layer => layer instanceof H.map.layer.ObjectLayer)
if(!layer) {
layer = new H.map.layer.ObjectLayer(clusterDataProvider)
hereMap.addLayer(layer, 0);
}
layer.getProvider()
But ofc there can be a lot of ObjectLayers in my map, so how can I recognize which one is that with clusterDataProvider.
Or anyone has a better idea of how to edit a specific layer or cluster provider?
You can retrieve the layer by utilize this code:
function findClusterLayer(hereMap){
let layer = hereMap.getLayers().asArray().find(layer => {
let isObjLayer = layer instanceof H.map.layer.ObjectLayer;
return isObjLayer && (layer.getProvider() instanceof H.clustering.Provider);
});
return layer;
}
Unfortunately, you can't get dataPoints nor from layer nor from cluster provider, use please workaround like this:
var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
clusteringLayer.$data = dataPoints;
later you can get datapoints like this:
var layer = findClusterLayer(map);
var dataPoints = layer.$data;
after changing some datapoints save it to cluster:
clusteredDataProvider.setDataPoints(dataPoints);
See please complete example
BTW: you can save some object into every datapoint see please documentation on https://developer.here.com/documentation/maps/3.1.20.0/api_reference/H.clustering.DataPoint.html#data
In my openlayers 5 (based on a angular 6 app), I am implementing a functionality where you search for something, query the db, the db brings back some geoJSON and I render this geoJSON data in a ol vector layer.
There are two different ways to search, so there are two different forms that bring back geoJSOn to the same ol vector.
Of course, before rendering the data, I have to clear out the layer.
This is my code
ngOnInit() {//initialize some params and the ol map
//bring results-as you type - pure angular
this.results = this.myForm.valueChanges.pipe(
switchMap( formdata => this.mapcmsService.searchName(formdata.name, formdata.cepDrop))
);//pipe
this.tilesource = new OlXYZ({
url:'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
});
this.tilelayer = new OlTileLayer({
source: this.tilesource
});
this.vectorsource = new VectorSource({});
this.vectorlayer = new VectorLayer({
source: this.vectorsource
});
this.view = new OlView({
center: OlProj.fromLonLat([6.661594, 50.433237]),
zoom: 2,
});
this.olmap = new OlMap({
target: 'map',
layers: [this.tilelayer,this.vectorlayer],
view: this.view,
projection: 'EPSG:3857'
});
const selectClick = new Select({
condition: click,
layers:[this.vectorlayer]
});
this.olmap.addInteraction(selectClick);
selectClick.on(
'select', ()=>{
const values = selectClick.getFeatures().item(0).values_;
this.getDetails(values.id);
}
);
} //closes ngOnInit
Outside the ngOnInit, after the initialization,there are the two different functions that bring geoJSON to the same ol vector layer. They basically do the same thing.
searchById(id){
this.map_loading = true;
this.myService.getById(id).subscribe((data) =>{
this.vectorsource.refresh();
this.vectorsource.clear();
const fff = (new GeoJSON()).readFeatures(data.data);
this.vectorsource.addFeatures(fff);
this.map_loading = false;
})
}//searchById
and
searchCategories(){
this.map_loading = true;
this.myService.categoriesSearch(this.categoriesForm.value).subscribe((data) =>{
this.vectorsource.refresh();
this.vectorsource.clear();
const fff = (new GeoJSON()).readFeatures(data.data);
this.vectorsource.addFeatures(fff);
this.map_loading = false;
})
}//searchCategories
The problem is that the ol vector source is not always cleared before new features are added. I search for something, features are rendered. I search again , and sometimes, the old features remain on the map, along with the new ones.
I did a silly move to add refresh with clean and nothing is fixed. This is not standard, eg every other search. This randomly happen and I dont have a clue how to debug it. Please advice
Thanks
Is there an unique id for each feature?
I had the same problem that features were loaded constantly. I used the bbox-strategy and every time I moved the map, it loaded all the features in the extent, even if they were already there.
I had to set an unique id in the data for my features, so OpenLayers can refer to the existing ones if you load new ones. This randomness maybe comes through the generated ids for the features, that are sometimes equal to the new ones and sometimes not.
Dont know if that faces your problem, it just flew into my brain while I read that.
I am looking for a possibility to get suggestions without country name.
I have the following js code:
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
The result is e.g. Austin TX, USA
Now I want to have for that example only
Expect result is e.g. Austin TX
See more info following image link
click here
Do you have an idea? Thanks. Dhiraj Gangal
I investigated more on this and I have more Info here:
The Service to use:
https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=de#place_autocomplete_service
The AutocompletePrediction defines what the service returns https://developers.google.com/maps/documentation/javascript/reference?hl=de#AutocompletePrediction
and a PredictionTerm here https://developers.google.com/maps/documentation/javascript/reference?hl=de#PredictionTerm is one part of the "description" that gets intially displayed as result.
The interesting part is actually the PredictionTerm which is a part of the whole place suggestion.
If you look into this example: https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction
You could easily grab each PredictionTerm of the suggestion results like in the following snippet:
predictions.forEach(function(prediction) {
var li = document.createElement('li');
var city = prediction.terms[2];
var content = "Results: "+city;
li.appendChild(document.createTextNode(prediction.description));
document.getElementById('results').appendChild(li);
});
I made an example: https://jsfiddle.net/yfkpvf72/1/
I've a layout template with a left sidebar where I show information of Location passed entities as an array.
Also in this template, I show a object Map with all of this locations.
I want to do click on a Location of my sidebar and then on the same template show another object Map replacing the previous with information of this Location. Keeping the sidebar with the information and not doing new queries on the database.
How to achieve this?
Ajax? Conditional layout?
I read this article but I don't understand how to solved my problem: http://twig.sensiolabs.org/doc/recipes.html#overriding-a-template-that-also-extends-itself
PD: I'm using Twig template and Symfony2
You could have a separate template for printing object map and, as you guessed, this would have to be done using AJAX. You would pass the data you want to show on map (not id as you don't want to query database again) and the controller would return formatted HTML.
However, this seems to me a bit overkill. I would always consider doing JS (with optional framework) in order to swap the content of sidebar with Map object.
It really depends on which map API do you use. If it could be controlled via JS I would look no further. It it could not, well then, AJAX is your natural choice....
UPDATE:
OK, what you should do is create initial Map object that will be modified later on:
var theMap = null;
function initializeMap(){
var mapOptions = {
center: new google.maps.LatLng(some_latitude, some_longitude),
zoom: 8, // goes from 0 to 18
mapTypeId: google.maps.MapTypeId.ROADMAP
};
theMap = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
// you must have some element with ID = 'map_canvas'
}
some_latitude and some_longitude are fairly unimportant as you will most likely set new coordinates in a few moments.
Now assuming (but not crucial at all) that you use some of the JS frameworks (I prefer jQuery) you could bind click event to those location links:
var onlyMarker = null;
$('.location').click(function(){
var $t = $(this);
var newLatLang = new google.maps.LatLng($t.attr('data-lat') ,$t.attr('data-lng'));
if ( onlyMarker == null ) {
onlyMarker = new google.maps.Marker({
position: newLatLang
map: theMap,
title: $t.attr('title')
});
}else{
onlyMarker.setPosition(newLatLang);
}
});
Now, relying on HTML5's 'data-*' attibutes is not good idea in particular as if you use any other version lower you will most likely end-up with invalid markup. The workaround is to for link (<a>) to carry id/key to LatLng object, for example:
// initially generated from `AJAX` or in `Twig` loop
var allLatlangs = [
new google.maps.LatLngf(some_latitude, some_longitude),
new google.maps.LatLngf(some_latitude, some_longitude),
new google.maps.LatLngf(some_latitude, some_longitude),
];
$('.location').click(function(){
var id = $(this).attr('id');
var newLatLang = allLatLang(id);
//....
// everything else is the same
// ....
});
Don't forget to include Maps API with proper API key:
https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=true
In order to obtain valid API key follow this link: API KEY HOW-TO
This link basically covers key steps that I have described here so study it and it should all come together nicely.
Also, if you're unsure how to retrieve some things from Maps you should consult reference:
REFERENCE which has every method call described pretty good
Remember not to execute any of this code until everything is being loaded.
Hope this helped a bit :)
I use Places library to autocomplete address input. Search is limited to only one city, and I get output like this:
"Rossiya, Moskva, Leninskiy prospekt 28"
How to hide "Rossiya, Moskva"? ...
My query:
function() {
// Search bounds
var p1 = new google.maps.LatLng(54.686534, 35.463867);
var p2 = new google.maps.LatLng(56.926993, 39.506836);
self.options = {
bounds : new google.maps.LatLngBounds(p1, p2),
componentRestrictions: {country: 'ru'},
};
var elements = document.querySelectorAll('.address');
for ( var i = 0; i < elements.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(elements[i],
self.options);
}
You can but you have to replace the value of the input field in two places.
Example:
var autocomplete = new google.maps.places.Autocomplete(input, placesOptions);
var input = document.getElementById('searchTextField');
inside the 'place_changed' event you need to do the following:
placeResult = autocomplete.getPlace();
//This will get only the address
input.value = placeResult.name;
This will change the value in the searchtextfield to the street address.
The second place is a bit tricky:
input.addEventListener('blur', function(){
// timeoutfunction allows to force the autocomplete field to only display the street name.
if(placeResult){ setTimeout(function(){ input.value = placeResult.name; }, 1); } });
The reason why we have to do this is because if you only add the event listener for blur, google places will populate the input field with the full address, so you have to 'wait' for google to update and then force your change by waiting some miliseconds.
Try it without the setTimeout function and you will see what I mean.
EDIT
You can't. I had it the other way around, that you were just looking for a city. There is no way to only print out the street name (I'm assuming that's a street name) from the address component.
OPPOSITE OF WHAT WAS ASKED
From the docs:
the (cities) type collection instructs the Place service to return results that match either locality or administrative_area3.
var input = document.getElementById('searchTextField');
var options = {
bounds: defaultBounds,
types: ['(cities)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
in result u have hash and from it u can get part what u want:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
now from "place" u can get it
place.geometry.location.lat()
and for address
place.address_components[0] or place.address_components[1] ...
depends on what u want to get
I had a very similar problem which indeed was solvable. This in an Angular 2 project but it should be applicable elsewhere as well. I filter my results for establishments, and wanted to show only the name and hide the address part of the result. This did the trick for me, a function executing once you select a suggestion:
getAddress(place: Object) {
this.zone.run(() => {
this.establishment = place['name'];
});
where zone is an NgZone component injected in the constructor and this.establishment is the variable tied to [(NgModel)] in the input field.
Inside place_changed set a timeout function:
var streetString = place.address_components[0] or place.address_components[1];
window.setTimeout(function() {
$('input').val(streetString);
}, 200);
This solution worked for me.