i´m using the openlayers drawing example inside my mobile JS (qooxdoo) app and all works fine except that the drawing cursor is above the viewport
so I can draw but I don´t see the cursor and I can only see the drawing after I scroll down.
I have used this qooxdoo example as a base. I have also added all the css rules from the openlayers example to my qooxdoo styles.
Seems like a css position issue, but I can´t seem to find it.
Any help would be appreciated.
/**
* Loads JavaScript library which is needed for the map.
*/
_loadMapLibrary: function() {
var self = this;
var req = new qx.bom.request.Script();
var options = {
singleTile: true,
ratio: 1,
isBaseLayer: true,
wrapDateLine: true,
getURL: function() {
var center = self._map.getCenter().transform("EPSG:3857", "EPSG:4326"),
size = self._map.getSize();
return [
this.url, "¢er=", center.lat, ",", center.lon, "&zoom=", self._map.getZoom(), "&size=", size.w, "x", size.h].join("");
}
};
req.onload = function() {
var vector = new OpenLayers.Layer.Vector('Vector Layer', {
styleMap: new OpenLayers.StyleMap({
temporary: OpenLayers.Util.applyDefaults({
pointRadius: 16
}, OpenLayers.Feature.Vector.style.temporary)
})
});
// OpenLayers' EditingToolbar internally creates a Navigation control, we
// want a TouchNavigation control here so we create our own editing toolbar
var toolbar = new OpenLayers.Control.Panel({
displayClass: 'olControlEditingToolbar'
});
toolbar.addControls([
// this control is just there to be able to deactivate the drawing
// tools
new OpenLayers.Control({
displayClass: 'olControlNavigation'
}), new OpenLayers.Control.ModifyFeature(vector, {
vertexRenderIntent: 'temporary',
displayClass: 'olControlModifyFeature'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Point, {
displayClass: 'olControlDrawFeaturePoint'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Path, {
displayClass: 'olControlDrawFeaturePath'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Polygon, {
displayClass: 'olControlDrawFeaturePolygon'
})]);
var osm = new OpenLayers.Layer.OSM();
osm.wrapDateLine = false;
map = new OpenLayers.Map({
div: 'googleMap',
projection: 'EPSG:900913',
numZoomLevels: 18,
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}), new OpenLayers.Control.Zoom(), toolbar],
layers: [osm, vector],
center: new OpenLayers.LonLat(0, 0),
zoom: 1,
theme: null
});
// activate the first control to render the "navigation icon"
// as active
toolbar.controls[0].activate();
}
req.open("GET", this._mapUri);
req.send();
},
Please check the z-Index of the cursor's class. The best way is to modify the z-Index through Chrome's debugger console or Firebug.
Is there any live example of your application available?
Related
I really can't find any good documentation or any good samples on how to do this.
Here is my code. This is running in an Asp.net Core View.
var imageMarker = "https://unpkg.com/leaflet#1.7.1/dist/images/marker-icon.png";
for (var i = 0; i < locationData; i++) {
let imageName = 'image' + i;
map.imageSprite.add(imageName, imageMarker).then(function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a point feature and add it to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point(i.longitude, i.latitude), {
name: i.name
}));
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: imageName,
//Optionally scale the size of the icon.
size: 0.5
},
textOptions: {
//Add some text
textField: name,
//Offset the text so that it appears on top of the icon.
offset: [0, -2]
}
}));
});
}
I'm not getting any errors. The Symbols just don't appear on the map.
The sample linked below works in my map.events.add ready function.
Image Sprite sample
Any help is much appreciated! Thanks!
Here is what ended up working for me. I worked with Microsoft Support on this. locationData contains the image, longitude and latitude. The min and max of both longitude and latitude is passed in as well to set the camera boundry. The biggest issue with my original code was setting iconOptions size to 0.5. The plugin did not like that. It's now set to 1.
function addMarkerSymbols(locationData, min_long, min_lat, max_long, max_lat)
{
map.setCamera({
bounds: [min_long, min_lat, max_long, max_lat],
padding: 50
});
$.each(locationData, function (i, item)
{
map.imageSprite.add('default-icon' + i, item.locationImage);
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a data set to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point([item.longitude, item.latitude]), null));
//Create a symbol layer to render the points.
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//The map control has built in icons for bar, coffee and restaurant that we can use.
image: 'default-icon' + i,
anchor: 'center',
allowOverlap: true,
size: 1
}
});
map.layers.add(layer);
});
}
I have two types of map tiles, and I want to be able to switch between them using layers with a custom html control. Both will have the same tilesize and the other options that I have set. The only difference is that one is located in normal map folder and the other in gridmap folder.
This is the code that I use to display one map:
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.MySimple
}).setView([0, 0], 2);
L.tileLayer('normalmap/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tileSize: 268,
noWrap: true,
tms: false,
continuousWorld: true
}).addTo(map);
I tried to follow the leaflet example: http://leafletjs.com/examples/layers-control.html
But no luck.
Can someone explain to me how to add 2 maps with a custom control?
Keep a reference to both your tile layers and add/remove them as appropiate:
var map = L.map(...);
var tilelayer1 = L.tileLayer('map1/{z}/{x}/{y}.jpg', { ... });
var tilelayer2 = L.tileLayer('map2/{z}/{x}/{y}.jpg', { ... });
tilelayer1.addTo(map);
document.getElementById('switch-layers').addEventHandler('click', function(ev){
if (map.hasLayer(tilelayer1)) {
map.addLayer(tilelayer2);
map.removeLayer(tilelayer1);
} else {
map.addLayer(tilelayer1);
map.removeLayer(tilelayer2);
}
})
Keep in mind that you can create layers and not add them to the map right away.
Let me know if you can help me out somehow, i'm kind of struggling to get my head around.
Starting with some Marionette application logics:
app.js
//basic setup
this.Graph = new joint.dia.Graph;
this.Paper = new joint.dia.Paper({ width: 640, height: 480, model: this.Graph });
// [...] lots of code
//adding elements
app.Elements.add(element);
So far so good. Now the tricky part. I want a collection.
JointCollectionView.js
module.exports = Marionette.CollectionView.extend({
tagName: 'div',
className: 'row',
childView: JointView,
addChild: function(child, ChildView, index){
//does that make sense?
app.Graph.addCell(child);
//should i add it to collection?
if (child.shouldBeShown()) {
return Marionette.CollectionView.prototype.addChild.call(this, child, ChildView, index);
}
},
getChildView: function(item) {
return app.Graph.getCell(item);
}
//[...]
})
Now even more tricky. How do i handle the joint-view to make it work with collections and also display html elements?
JointView.js
module.exports = joint.dia.ElementView.extend({ /* ?!?!?! */ });
//OR ?
module.exports = Marionette.ItemView.extend({
jointElementView: null, //this will be like above somewhere else...
initialize: function(options){
jointElementView = new JointElementView({ /* ... */ });
}
})
I'm no JointJS expert, but your implementation looks perfect.
You want to use the second option:
JointView.js
module.exports = Marionette.ItemView.extend({
template: _.template("");
jointElementView: null, //this will be like above somewhere else...
initialize: function(options){
this.jointElementView = new JointElementView({ /* ... */ });
}
});
since a Marionette.CollectionView expects a Marionette view (sp. a Marionette.ItemView or descendent [LayoutView/CompositeView]).
What I would add to JointView.js is a method to inject the result from this.jointElementView into the JointView.js html. So, add a property to it, like:
onRender: function () {
this.$el.append(this.jointElementView.el); // Where this.jointElementView.el is the JointJS view html
}
With the help of #seebiscuit i looked much deeper into jointjs and narrowed down how i should approach this problem (You didn't seem to be interested in the points though, so i'll answer myself)
The following files were edited:
app.js (changed, important!)
//this step is necessary to create these element before the paper is created.
//Make jointjs GLOBAL!!!!!!
joint.shapes.html = {};
joint.shapes.html.Element = require('views/Element'); //this dude im gonna use to create the elements
joint.shapes.html.ElementView = require('views/ElementView'); //this badboy will fire when i create those elements. MAGIC!
//basic setup
this.Graph = new joint.dia.Graph;
this.Paper = new joint.dia.Paper({ width: 640, height: 480, model: this.Graph });
// [...] lots of code
//adding elements
app.Elements.add(element);
JointCollectionView.js (beauti-/simplyfied)
module.exports = Marionette.CollectionView.extend({
tagName: 'div',
className: 'row',
childView: JointView,
onRender: function(){
// jointjs' paper is added here long after jointjs custom element init.
this.el.appendChild(app.Paper.el);
},
onDestroy: function(){
// removal of the paper is done here
this.el.removeChild(app.Paper.el);
},
buildChildView: function(child, JointView, childViewOptions){
// add model, jointjs' paper and graph into JointView's options
var options = _.extend({model: child}, childViewOptions);
options = _.extend({paper: app.Paper, graph: app.Graph}, options);
return new JointView(options);
}
//[...]
})
JointView.js (magic here!)
module.exports = Marionette.ItemView.extend({
tagName: 'div',
className: 'html-element',
template: "#agentTmpl",
// store here just in case
cell: null,
// [...]
initialize: function() {
// initialize joinjs element-shape here
Marionette.bindEntityEvents(this, this.model, this.modelEvents);
if(this.cell == null){
//notice `el: this.el` This will actually pass the option el to ElementView. Surprised?
//Yeah me too. From there i can do with the dom-element whatever i want
this.cell = new joint.shapes.html.Element({ el: this.el, position: { x: 80, y: 80 }, size: { width: 250 } });
}
},
onRender: function(){
// after rendering add cell to graph
this.options.graph.addCell(this.cell);
},
onDestroy: function(){
// after removal remove cell from graph
this.cell.remove();
}
});
Element.js
ElementView.js
For simplicity more or less like here: http://www.jointjs.com/tutorial/html-elements
To summarize what actually happens is: whenever a new Element is created ElementView will fire all necessary event (initialize, render & whatnot). From there you can manipulate the drawn svg elements or overlap (similar to the tutorial) with my previously created JointView's html. I basically put my JointView dom-element over the SVG which is drawn by jointjs.
There you go. Fixed!
In preparation for the upcoming OpenLayers 3 release, I tried to get the basic map example to work in a Qooxdoo mobile app.
I used the Qooxdoo mobileshowcase demo map as a starting point, but after many hours of trying I cannot get the map to appear.
For brevity, I included the ol3 css
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
I left the whole Maps.js class the same except replaced the mapUri with the OL3 one:
_mapUri : "http://ol3js.org/en/master/build/ol.js",
and then replaced _loadMapLibrary with:
_loadMapLibrary : function() {
var req = new qx.bom.request.Script();
req.onload = function() {
var map = new ol.Map({
target: 'osmMap',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
}.bind(this);
req.open("GET", this._mapUri);
req.send();
},
it seems like it should work...
The trick was to add these two lines:
mapContainer.setId("map");
mapContainer.addCssClass("map");
in this override:
// overridden
_createScrollContainer : function()
{
// MapContainer
var layout = new qx.ui.mobile.layout.VBox().set(
{
alignX : "center",
alignY : "middle"
});
var mapContainer = new qx.ui.mobile.container.Composite(layout);
mapContainer.setId("map");
mapContainer.addCssClass("map");
return mapContainer;
},
Hope someone can help me with this, im trying to show two direction points with zoom and centered so i can just show the 2 points instead of all the map! it seems that the zoom doesn't work.
here is my code
var map;
function initialize(){
var mapOptions = {
zoom: 14,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var request = {
origin:"Mexico",
destination:"Montreal",
travelMode: google.maps.TravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
// Indicamos dónde esta el mapa para renderizarnos
directionsDisplay.setMap(map);
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
thanks in advance
To fix your problem change:
disableDefaultUI: true,
to
disableDefaultUI: false,
From the [Google Maps API]: https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults
You may instead wish to turn off the API's default UI settings. To do
so, set the Map's disableDefaultUI property (within the Map options
object) to true. This property disables any automatic UI behavior from
the Google Maps API.
If you still want to disable UI elements, you should probably do them individually.