Good morning, I'm trying to show a marker on an OpenLayers map, but I can not do it.
The error I reviewed is in:
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([13.866291, -90.204114], 'EPSG:4326', 'EPSG:3857')),
name: 'nombre',
population: 4000,
rainfall: 500
});
Because if I do it this way:
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([0, 0])
});
If the marker appears. If someone can tell me how to correctly place the coordinates in iconfeature thank you very much.
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([13.866291, -90.204114], 'EPSG:4326', 'EPSG:3857')),
name: 'nombre',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//console.log(vectorSource);
//vectorSource.addFeature(iconFeature);
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// console.log("vectorLayer:");
//console.log(vectorLayer);
// vectorLayer.setZIndex(5);
var coordenadas = [
{lat: 13.866291, lng: -90.204114},
{lat: 13.866325, lng: -90.204115},
{lat: 13.866325, lng: -90.204115},
{lat: 13.866365, lng: -90.20413},
{lat: 13.86639, lng: -90.20416},
{lat: 13.86639, lng: -90.20416},
{lat: 13.866434, lng: -90.204177},
{lat: 13.866457, lng: -90.204189},
{lat: 13.866457, lng: -90.204189},
{lat: 13.866494, lng: -90.204192},
{lat: 13.866512, lng: -90.204298},
{lat: 13.866507, lng: -90.204353},
{lat: 13.866479, lng: -90.204402},
{lat: 13.866479, lng: -90.204402},
{lat: 13.86642, lng: -90.204426},
{lat: 13.86642, lng: -90.204426},
{lat: 13.86642, lng: -90.204426},
{lat: 13.866385, lng: -90.204396},
{lat: 13.86636, lng: -90.204366},
{lat: 13.866353, lng: -90.204334},
{lat: 13.866324, lng: -90.20429},
{lat: 13.866303, lng: -90.204236},
{lat: 13.866293, lng: -90.204177},
{lat: 13.866282, lng: -90.20415},
{lat: 13.866282, lng: -90.20415},
{lat: 13.866291, lng: -90.204114}
];
var parserJSTS = new jsts.io.OL3Parser();
var poly = new ol.Feature({
geometry: new ol.geom.Polygon([coordenadas.map(function (_ref) {
var lng = _ref.lng,
lat = _ref.lat;
return [lng, lat];
})])
});
var boundingBox = poly.getGeometry().getExtent()
var polybbox = new ol.Feature({
geometry: ol.geom.Polygon.fromExtent(boundingBox)
})
var [xmin, ymin, xmax, ymax] = boundingBox
var porcentaje = 0.25
var newXmax = xmin + ((xmax - xmin) * porcentaje)
var newBoundingBox = [xmin, ymin, newXmax, ymax]
var polybbox50 = new ol.Feature({
geometry: ol.geom.Polygon.fromExtent(newBoundingBox)
})
var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry())
var polyjsts = parserJSTS.read(poly.getGeometry())
var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts)
var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry)
var newPoly = new ol.Feature({ geometry: intersectionGeometry })
//console.log(boundingBox)
newPoly.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: '#ffbb00'
})
}))
var layer = new ol.layer.Vector({
source: new ol.source.Vector()
})
// Descomentar para ver los bounding boxes
//layer.getSource().addFeature(polybbox)
//layer.getSource().addFeature(polybbox50)
layer.getSource().addFeature(poly)
layer.getSource().addFeature(newPoly)
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer,vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions:({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2,
projection: 'EPSG:4326'
})
});
map.getView().fit(boundingBox)
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsts/1.5.0/jsts.js"></script>
<script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js"></script>
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>