I have a map with multiple Layers. One of them shall project an SVG on the map, indicating certain regions (if not obvious, it's the red area in the images). I got this working on the default zoom level.
But as soon as I change the zoom in any direction, the SVG layer just moves too much in a direction depending on where I initiate the zoom change.
This is the relevant code I have:
//Map init
var mapcenter = ol.proj.fromLonLat([10.615219, 51.799502]);
var layers = [];
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: mapcenter,
zoom: 9.5
})
});
//SVG init
const svgContainer = document.createElement('div');
const xhr = new XMLHttpRequest();
xhr.open('GET', '/shared/harzregionen.svg');
xhr.addEventListener('load', function () {
const svg = xhr.responseXML.documentElement;
svgContainer.ownerDocument.importNode(svg);
svgContainer.appendChild(svg);
});
xhr.send();
const width = 350;
const height = 0;
const svgResolution = 360 / width;
svgContainer.style.width = width + 'px';
svgContainer.style.height = height + 'px';
svgContainer.className = 'svg-layer';
//SVG Layer
map.addLayer(
new ol.layer.Vector({
render: function (frameState) {
const scale = svgResolution / frameState.viewState.resolution;
const center = frameState.viewState.center;
const size = frameState.size;
const cssTransform = ol.transform.composeCssTransform(
300,
120,
480 / frameState.viewState.resolution,
480 / frameState.viewState.resolution,
frameState.viewState.rotation,
-(center[0] - mapcenter[0]) / 420, //These values were kinda
(center[1] - mapcenter[1]) / 250 //trial and error for default zoom
);
svgContainer.style.transform = cssTransform;
svgContainer.style.opacity = this.getOpacity();
return svgContainer;
}
})
);
I'm pretty sure I have to use a certain formula to calculate the values in composeCssTransform but it feels like there should be an easy way to do it instead of trial and error until it somewhat works.
So, my question is: Is there an easy way to lock an SVG layer to a set position on the world map like the layers with markers?
I need to position text inputs at various places on a KonvaJS layer. I found the following code at https://konvajs.github.io/docs/sandbox/Editable_Text.html and I'm trying to understand the textPosition, stageBox, and areaPosition vars in this code. I want my stage centered in the browser window, but when I do that, the textarea (activated on dblclick) pops up way off to the left. I can't get a console readout of the x/y coordinates, so I can't visualize how the positioning works &, thus, how to change it. Can anyone explain, or point me in the right direction?
var text_overlay = new Konva.Layer();
stage.add(text_overlay);
var textNode = new Konva.Text({
text: 'Some text here',
x: 20,
y: 50,
fontSize: 20
});
text_overlay.add(textNode);
text_overlay.draw();
textNode.on('dblclick', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode.text();
textarea.style.position = 'absolute';
textarea.style.top = areaPosition.y + 'px';
textarea.style.left = areaPosition.x + 'px';
textarea.style.width = textNode.width();
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
// add the layer to the stage
stage.add(text_overlay);
UPDATE: I solved part of the problem--the textarea showing up way out of position. You need to use 2 divs in the HTML file instead of one, like so:
<div id="containerWrapper" align="center"><div id="container"></div></div>
Thanks to Frens' answer on Draw border edges of the Konvajs container Stage in html for that one!
I came from OpenLayers 2 now to OpenLayers 4.
I want to draw a circle with a special radius of meters.
I tried:
var circleStyle = new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.4)' }),
stroke: new ol.style.Stroke({ color: 'rgb(255,0,0)', width: 2 }),
});
//var units = map.getView().getProjection().getUnits();
// var radiusM = circle.getRadius() * ol.proj.METERS_PER_UNIT[units];
var circleFeature = new ol.Feature({
geometry: new ol.geom.Circle(ol.proj.fromLonLat([Element.Position.Longitude, Element.Position.Latitude]), MetersToRadius(Element.RadiusInMetern)),
UserID: Element.UserID,
ID: Element.ID
});
circleFeature.setStyle(circleStyle);
vectorSource.addFeature(circleFeature);
but when I check the circle with control.ScaleLine it´s to small!
I found this code, but it doesn´t work on OpenLayer 4.
The object "projection.getPointResolution(resolutionAtEquator,
center);" doesnt exists!
var view = map.getView();
var projection = view.getProjection();
var resolutionAtEquator = view.getResolution();
var center = map.getView().getCenter();
var pointResolution=projection.getPointResolution(resolutionAtEquator, center);
var resolutionFactor = resolutionAtEquator / pointResolution;
var radius = (radius / ol.proj.METERS_PER_UNIT.m) * resolutionFactor;
return(radius);
you need to use
ol.proj.getPointResolution(projection,resolutionAtEquator,center);
I am follow this example to make a map with leaflet and d3, using the latest versions of d3 and leaflet. Something in my code is causing d3 to return different values for the SVG elements in Chrome and FF 28. This is causing the points to be skewed in FF, which has different d values in the PATH elements as well as different transform properties in the SVG elements.
Here is the SVG for Chrome:
<svg width="1049711" height="1802" transform="translate(127,1079)" style="margin-left: -127px; margin-top: -1079px;">
<g class="leaflet-zoom-hide" transform="translate(127,1079)">
<path class="nora f" id="1383_ST_BERNARD_AVE" lat="29.970905251" long="90.064206456" d="M287,210m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"></path>
<path class="fixed f" id="7400_ADVENTURE_AVE" lat="30.0599104550001" long="89.9260116889999" d="M1092,-389m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"></path>
Here is the SVG for Firefox
<svg width="1049711" height="1802" style="margin-left: -97px; margin-top: -1079px;" transform="translate(97,1079)">
<g class="leaflet-zoom-hide" transform="translate(97,1079)">
<path class="nora f" id="1383_ST_BERNARD_AVE" lat="29.970905251" long="90.064206456" d="M317,210m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/>
<path class="fixed f" id="7400_ADVENTURE_AVE" lat="30.0599104550001" long="89.9260116889999" d="M1122,-389m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/><path class="nora f" id="4170_OLD_GENTILLY_RD" lat="30.0024662600001" long="90.0401487569999" d="M457,-3m0,2a2,2 0 1,1 0,-4a2,2 0 1,1 0,4z"/>
Here is the code that loads the map and projects the points. At the very end there is a function project that returns a different x-value for the point in Chrome and FF 28. I think that this line is creating the overall problem with the code. The x-value is off by different values at different times, so it is hard to write a correction.
var map = new L.Map("map", {center: [29.95, -90.05], zoom: 13, minZoom:10, maxZoom:18})
.addLayer(new L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png'));
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
//these brackets are jinja2 template syntax. They eventually return 'static/out.json'
d3.json('out.json') }}', function(collection) {
var bounds = d3.geo.bounds(collection),
path = d3.geo.path().projection(project).pointRadius(function (d) {return 2});
console.warn(path)
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path").attr("class", function(d){
return d.properties.category + " " + d.properties.investigates;;
}).attr("id", function(d){
return d.geometry.address;
}).attr("lat", function(d){
return Math.abs(d.geometry.coordinates[1]);
}).attr("long", function(d){
return Math.abs(d.geometry.coordinates[0]);
});
$(".t").on("click", function(e) {
var adr = "/" + this.id;
showDialog(adr);
});
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
console.warn(bounds)
var bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
svg .attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px").attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
feature.attr("d", path)
}
// Use Leaflet to implement a D3 geographic projection.
function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
});
I proposed this as a bug to leaflet. If you try the fiddle in FF 28 and Chrome you will see that line 51 returns different x-values for the same lat/long in Chrome (right x value) and firefox (wrong x value)
I have tried this fiddle in FF 27 and FF 28 -- each of these versions of firefox returns a different (and incorrect) x-value for the point on line 51.
Have I hit a bug in leaflet or d3 or is there an issue with my code? Is there a workaround? What's going on here?
I ended up getting this to work by following this example: https://gist.github.com/ZJONSSON/2957559
Here is the working code:
var path = d3.geo.path().projection(function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}).pointRadius(function(d) {
return 2;
});
/* Load and project/redraw on zoom */
d3.json("static/out.json", function(collection) {
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("class", function(d) {
return d.properties.category + " " + d.properties.investigates + " " + d.properties.thumbnail;
}).attr("id", function(d) {
return d.properties.address;
}).attr("lat", function(d) {
return Math.abs(d.geometry.coordinates[1]);
}).attr("long", function(d) {
return Math.abs(d.geometry.coordinates[0]);
})
.attr("d", path);
map.on("viewreset", function reset() {
feature.attr("d", path);
});
loadThumbs();
});
The problem is how you're calling d3.json.
d3.json('{{url_for('static', filename='out.json') }}', //...
isn't valid. The d3.json function expects its first parameter to be a URL string, not an object. In both FF and webkit you're probably getting random garbage and that's what your code uses to calculate the bounds.
Are you trying to use a template (i.e. mustache) to construct the URL? If so, you're forgetting to render the template.
I am creating a circle using SVG
var gauge = mapSvg.circle(center['x'], center['y'], 85).attr({'stroke-width': 3, 'stroke': 'black', 'fill': 'white'});
It is in for loop, this circle created three times. I have added ontouchstart on its click
gauge.node.ontouchstart = function () { alert("hi>>>>>") }
but this alert is not showing.
This should work...
var r = Raphael("blah",200,200);
var c = r.circle(100,100,100).attr({fill: 'red' }).touchstart( function() { alert('hi') });
jsfiddle http://jsfiddle.net/7c56E/