Marcar punts al mapa d’OpenStreetMap (a OSM o amb icones personalitzades per a pàgines web)
Si el que volem és mostrar a la nostra pàgina web un mapa en què marquem ubicacions amb icones personalitzades necessitarem OpenLayers (www.openlayers.org/).
Com veureu hi ha 3 tipus de fitxers:
- PuntsAlMapaOSMLaPalma.htm que és la pàgina web que s’obre quan cliqueu sobre la imatge del damunt (que porta a la demostració).
- TestImageStyle.js és el codi java que interactuarà amb OpenLayers per mostrar-nos les icones al mapa
- I també hi trobareu vuit fitxers .PNG que són les imatges de les icones per a cada ubicació.
Només amb aquests fitxers ja podem crear un mapa amb marcadors amb icones personalitzades. Per tant, val la pena descarregar-los per posar-nos a retocar-los.
Suposem que volem afegir-hi un nou element, per exemple, «casa».
Obrirem el fitxer TestImageStyle.js amb un editor de text, com per exemple el gedit. Veurem que a la segona línea hi trobem:
var ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature
No cal dir que aquests vuit Features fan referència als vuit punts marcats actualment al mapa. Aquí hi afegirem un nou element (el novè), que es dirà «casaFeature»:
var ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature, casaFeature
A continuació cercarem a la línia número trenta-cinc el text:
vectorLayer.addFeatures([ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature]);
Per afegir-hi també un altre «casaFeature»:
vectorLayer.addFeatures([ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature, casaFeature]);
A continuació reaprofitarem el codi de qualsevol de les Features ja creades, per exemple el de la Feature «Konfraria», el codi s’inicia a la línia vuitanta-nou i és:
// Crear la Feature Konfraria
var konfrariaStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style[‘default’]);
konfrariaStyle.graphicOpacity = 1;
konfrariaStyle.externalGraphic=“konfraria.png”;
konfrariaStyle.graphicWidth = 50;
konfrariaStyle.graphicHeight = 50;
pWGS84 = new OpenLayers.LonLat(1.9657,41.4133);
pOSM = transformToSphericalMercator(pWGS84);
point = new OpenLayers.Geometry.Point(pOSM.lon,pOSM.lat);
konfrariaFeature = new OpenLayers.Feature.Vector(point,null,konfrariaStyle);
Podem copiar i enganxar aquest codi on farem els següents canvis:
// Crear la Feature Casa(només informatiu)
var casaStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style[‘default’]);
casaStyle.graphicOpacity = 1;
casaStyle.externalGraphic=“directori_fitxer/nom_fitxer_icona”;
casaStyle.graphicWidth = amplada en píxels de la icona;
casaStyle.graphicHeight = alçada en píxels de la icona;
pWGS84 = new OpenLayers.LonLat(lat_punt_en_mapa,lon_punt_en_mapa);
pOSM = transformToSphericalMercator(pWGS84);
point = new OpenLayers.Geometry.Point(pOSM.lon,pOSM.lat);
casaFeature = new OpenLayers.Feature.Vector(point,null,casaStyle);
Hi ha un parell d’aspectes que possiblement ens interessi retocar, el primer és a la línia catorze:
centerWGS84=new OpenLayers.LonLat(1.9669,41.4119);
El que tenim marcat en color rosa són les coordenades ( lat , lon ) on es centrarà el mapa per defecte. El segon aspecte a retocar el trobem a la línia vint-i-cinc:
map.setCenter(centerOSM, 15);
Aquest codi ens indica el nivell de zoom que apliquem al punt on centrem el mapa. Els valors poden anar des de 1 (màxim allunyament) a 18 (màxim apropament).
Quan tenim aquests canvis realitzats podem desar el fitxer, i passem a obrir el fitxer .HTML. En realitat aquest fitxer conté gran part de codi que només respon a aspectes estètics i d’altres tipus. La part de codi necessària per mostrar el mapa únicament és:
On podrem decidir l’amplada (width) i l’alçada (height) en píxels del mapa que es mostrarà al navegador, així com el gruix i color del marge (solid 1px black).
Seguint aquestes senzilles instruccions -que penso que qualsevol persona sense massa coneixements pot seguir-, ja podreu tenir el vostre mapa amb la ubicació que desitgeu senyalada amb una icona personalitzada a la vostra web.
Si necessites informació més tècnica sobre OpenLayers, val la pena que et passis pel bloc Descartes (aquest enllaç et portarà al bloc, filtrant les entrades per l’etiqueta OpenLayers).
Espero que hagi estat d’utilitat! 😉
