Efter att ha valt OpenLayers som teknik så tänker jag renodla och lägga till rätta så mycket som möjligt innan kodandet börjar på riktigt.
Först så vill jag isolera så mycket som möjligt av de lager jag vill ha med i kartan, så att administrationen och lagerhanteringen blir så enkel som möjligt.
För detta så delar jag upp sidan i flera filer.
var options = {projection: new OpenLayers.Projection("EPSG:3857")}
var map = new OpenLayers.Map('map', options);
var osm = new OpenLayers.Layer.OSM("OpenStreetMap");
map.addLayers([osm]);
map.setCenter(new OpenLayers.LonLat(14.97, 57.67).transform("EPSG:4326","EPSG:3857"), 14);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
var sverige = new OpenLayers.Layer.WMS(
"Sverige QGIS", "http://192.168.0.121/cgi-bin/qgis_mapserv.fcgi?VERSION=1.3.0&map=/qgis/Sverige.qgs",
{ layers: "Sverige", transparent: "true", format: "image/png" },
{isBaseLayer: false}
);
map.addLayers([sverige]);
Inledningsvis så experimenterar jag med att flytta om lite i ordningen på raderna och kan snabbt konstatera att jag kan samla inställningar och grundlager först och lägga till lager i ett eget ”kodblock” efter detta (koden ovan).
Det blir därför inga problem att bryta ut dessa två block till separata filer som jag döper till grundkarta.js och lager.js.
<html> <head> <script src="openlayers/OpenLayers.js"></script> </head> <body> <div style="width:100%; height:100%" id="map"></div> <script type="text/javascript" src="grundkarta.js"></script> <script type="text/javascript" src="lager.js"></script> </body> </html>
Själva HTML koden blir därav ganska minimalistisk, men denna fil är ju något man kan lämna över till en webbdesigner för att allt ”fluff” skall bli så snyggt som möjligt. Jag nöjer mig med sidan som den är, med minimala modifieringar.
Lite naket känns det dock, så jag lägger till lite kontroller i ”grundkarta.js”.
var options = {
projection: new OpenLayers.Projection("EPSG:3857"),
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Permalink("Länk till denna karta"),
new OpenLayers.Control.MousePosition({ prefix: "Muspekarens position:", displayProjection: "EPSG:4326" }),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ScaleLine()
]
}
var map = new OpenLayers.Map('map', options);
Sedan så kan man alltid byta knappar och fixa och dona med stilmallarna tills man har något som man tycker passar lite bättre än standard.
0 svar på ”Experimentet fortsätter – Webbkartan”