If I add logo to the map
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 1
}),
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})
],
target: 'map',
logo: true
});
How can I change the position of the logo to be on top left corner and change it's size?
I never tried this but according to the documentation you can pass logo options instead of a boolean.
In the logo options there are properties like offset, style, position... which should help achieve what you are asking for.
Options are made using a JavaScript object, so comma separated key/value pairs { style : ..., offset: ...}.
Related
Apologies for the rather simple question.... I'm fairly new to both coffeescript and Google Maps API.
I'm trying to replicate the circle symbol for a Marker in this example using coffeescript, but I'm struggling with the syntax on the icon statement.
Can anyone show me how to do write the following code in coffeescript, specifically the icon part?
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
})
You could just drop the var and be done with it:
marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
}
})
Function-calling parentheses and object braces are often optional in CoffeeScript but you can still include them if it makes the code clearer to you.
Or you could drop the optional commas, parentheses, and braces:
marker = new google.maps.Marker
position: map.getCenter()
icon:
path: google.maps.SymbolPath.CIRCLE
scale: 10
Note that the parentheses on the map.getCenter call are not optional since that function is called without any arguments.
Or you could say:
marker = new google.maps.Marker(
position: map.getCenter()
icon:
path: google.maps.SymbolPath.CIRCLE
scale: 10
)
to make the nesting a little clearer. This is probably the one I'd use. If there was more nesting then I'd probably start adding braces to make the structure clearer or break it into pieces:
icon =
path: google.maps.SymbolPath.CIRCLE
scale: 10
marker = new google.maps.Marker(
position: map.getCenter()
icon: icon
)
I'm changing from markers to vector layer and I can't make my site to use any sort of non-default icon, whatever I put in externalGraphic style attribute doesnt have effect on map. I just see orange circles. To be exact, no matter what I put in Openlayers.Style to style my point features, I get default look of icons.
It should be easy, but I try for days and can't make it work, so I came here for help. When warstwa_ikon was markers layer everything was fine, but I need extra functionality.
Thats my styling code:
var StylIkony = new OpenLayers.Style({
externalGraphic : '${symbol}',
graphicWidth : 15,
graphicHeight : 15,
cursor : 'pointer'
});
var StylWarstwyIkon = new OpenLayers.StyleMap ({
default: StylIkony,
delete: StylIkony,
select: StylIkony,
temporary: StylIkony
});
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali",{ eventListeners: { "featureselected": WywolajRamke }});
warstwa_ikon.StyleMap = StylWarstwyIkon;
map.addLayer(warstwa_ikon);
Thats already executed code from generating Features:
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279231, 7127620);
Ikona = new OpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/10.png", "idLokalu": 1 });
warstwa_ikon.addFeatures([Ikona]);
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279245, 7127630);
Ikona = newOpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/6.png", "idLokalu": 2 });
warstwa_ikon.addFeatures([Ikona]);
Thats DOM of my vector layers (warstwa_ikon) StyleMap:
http://s24.postimg.org/hwfjakg0l/stylemap.png
Thats DOM of my vector layer first Feature, which should be styled:
http://s9.postimg.org/oxlocyku7/feature.png
Sorry, I can't include normal images yet. I should add that this is not a problem with accessing icon image file, I can't get layer to use any sort of images, even from internet links.
Declares StyleMap on layer creation as:
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali", {
styleMap: StylWarstwyIkon,
eventListeners: ...
});
and removes:
warstwa_ikon.StyleMap = StylWarstwyIkon;
We are using google utility script to have a custom icon with information below it.
var marker5 = new MarkerWithLabel({position: point,
map: map,
draggable: false,
raiseOnDrag: false,
labelContent: infor,
labelAnchor: new google.maps.Point(20, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
icon: {
url: entImage,
size: new google.maps.Size(30, 30),
origin: new google.maps.Point(20, 0)
},
marker: MarkerWithLabel
});
The issue when we size the icon using new google.maps.Size(30, 30) it could not show up the full icon just partial of it. How ensure that when we resize it covers the whole image.
I have managed to solve this problem via a simple way and for the benefit of the rest just create one image icon like this
var pIcon = new google.maps.MarkerImage('logo.png',
null,
null,
null,
new google.maps.Size(30, 30));
Thereafter just apply into the rest of the codes.
When I add more Markers to Google Map with different icon types like:
...
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "http://www.test.com/marker.png",
zIndex: 10
});
...
and
...
var resultIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "black",
strokeColor: "black",
strokeWeight: 1,
};
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
zIndex: 5
});
...
Than the zIndex doesn't work and the Symbol marker appears on the top.
Am I wrong with my code or how can I make the zIndex working?
You have to both specify a zIndex and add
optimized: false
to every marker constructor, eg.
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
optimized: false,
zIndex: 5
})
This seems to be an issue with the new canvas based rendering of the markers.
Edit:
This really solves the issue.
One thing to mention though is that every marker has to have the "optimized: false" attribute. As long as one marker does not have it, it will not work.
Remove any of the "optimized: false" attributes from LeJared's fiddle and you will encounter the bug.
http://jsfiddle.net/BNWYq/1/
Setting zIndex of the circle to -99 seems to help: http://jsfiddle.net/rq4vs/2/
I've made a little fiddl:
http://jsfiddle.net/gSRmV/
Looks like a bug, that has to be fixed by google.
Adding optimized: false doesn't change anything.
Edit: Still looks like bug, but the two solutions from tborychowski and Codetoffel seem to work.
I've been trying to learn Sencha Touch and I'm stuck on something that is probably pretty obvious. I'm trying to update a tabPanel with a button event. I'd like for a tap on the first button to load 'maptestPanel' in the same panel. This is a map loaded from its own js file.
The map panel looks ok by itself:
maptestPanel = new Ext.Panel({
layout: 'fit',
fullscreen: true,
items: [map]
});
But I'm not seeing how to properly place it in the tabPanel
The code is:
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var navBar = new Ext.Toolbar({
dock : 'top',
title: 'Some App Name',
});
var topPanel = new Ext.Panel({
dockedItems: [navBar],
fullscreen : true,
//html: 'Test Panel'
});
var tapHandler = function(button, event) {
btnPanel.update(maptestPanel); //I'm sure part of the problem is here
}
var SomeDate1 = new Ext.Button({
text:"Some date",
minWidth:200,
height: 45,
cls:"listButtonTop",
handler:tapHandler
});
var SomeDate2 = new Ext.Button({
text:"Another Date",
minWidth:200,
height: 45,
cls:"listButton"
});
var SomeDate3 = new Ext.Button({
text:"And Another Date",
minWidth:200,
height: 45,
cls:"listButtonBottom"
});
var btnPanel = new Ext.Panel ({
id: 'date',
items: [SomeDate1,SomeDate2,SomeDate3],
});
var tabpanel = new Ext.TabPanel({
layout: 'card',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'Maps',
//html: '<h1>Place holder</h1>',
iconCls: 'maps',
cls: 'card1',
items: [btnPanel]
}, {
title: 'Favs',
html: '<h1>Place holder</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
layout: 'fit'
//items: [SomeList, SomeOtherList, AnotherList]
}, {
title: 'Info',
html: '<h1>Place holder</h1>',
cls: 'card4',
iconCls: 'info'
}]
});
}
});
Thanks for any advice or a steer in the right direction.
There's several things you need to do to fix up that code:
1) 'Maps' has no layout. Since it has a single child item, layout: 'fit' would be appropriate here.
2) Only use fullscreen on the outermost item, you don't want the other items to be fullscreen since they are child items of other containers.
3) To dynamically add items to a container, use the add() method on container. You'll also need to call doLayout() to trigger a layout for the container.
btnPanel.add(maptestpanel);
btnPanel.doLayout();
However, in this case I don't see why you're adding the map to a panel, it doesn't give you any extra functionality. Instead, I would add the map directly to the btnPanel.
4) The btnPanel has no layout either, so you'll need to choose an appropriate layout there as well, possibly the vbox layout.
I only know "classic" sencha, but this should work the same way : So you could just add the mapPanel (but hidden) to your tabPanel, and in the button handler show it while hiding the button panel.
Besides, speaking of layouts, I don't think you need to precise layout:'card' in tabPanel since it uses a card layout by definition