ADD MARKERS USING OPENSCALES

1.2

Tutorial 3

Marine Jourdain

2

Prerequisites

This tutorial begins where ”Create Your First Map Using OpenScales” (tutorial 2) left off.

3

What you obtain with this tutorial

4

Action Script code to obtain the map

<fx:Script> <![CDATA[ import org.openscales.basetypes.Location; import org.openscales.core.Map; import org.openscales.core.feature.CustomMarker; import org.openscales.core.feature.PointFeature; import org.openscales.core.layer.FeatureLayer; import org.openscales.core.style.Style; import org.openscales.geometry.Point; import org.openscales.proj4as.ProjProjection; [Bindable] private var map:Map = null; private function initMap():void { map = fxmap.map; var markers:FeatureLayer = new FeatureLayer("NameOfYourLayerWithMarkers"); markers.projection = new ProjProjection("EPSG:4326"); markers.generateResolutions(19); markers.style = Style.getDefaultPointStyle(); //add the first marker var marker:PointFeature = PointFeature.createPointFeature(new Location(4.85680,45.75336)); markers.addFeature(marker); //add a second marker marker = PointFeature.createPointFeature(new Location(4.85780,45.75336)); markers.addFeature(marker); //add marker with different symbol, writing url address markers.addFeature(CustomMarker. createUrlBasedMarker("http://earth.google.com/intl/en_uk/outreach/images/add_placemark.png", new Location(4.85580,45.75336))); //add the layer map.addLayer(markers); } ]]> </fx:Script>

5

Add a default style marker (1)

A marker is created in the Action Script part of the mxml file.

To create a simple marker you need:to create a feature layerto define the system of projection used by the

layerto generate the resolutions at which the markers

will be visibleto define the default styleto create a point with the correct coordinates

(same projection as the layer)

6

Add a default style marker (2)

The Action Script code becomes: <fx:Script> <![CDATA[ import org.openscales.core.Map; import org.openscales.core.feature.PointFeature; import org.openscales.core.layer.FeatureLayer; import org.openscales.core.style.Style; import org.openscales.geometry.Point; import org.openscales.proj4as.ProjProjection; [Bindable] private var map:Map = null; private function initMap():void { map = fxmap.map; var markers:FeatureLayer = new FeatureLayer("NameOfYourLayerWithMarkers"); markers.projection = new ProjProjection("EPSG:4326"); markers.generateResolutions(19); markers.style = Style.getDefaultPointStyle(); var marker:PointFeature=PointFeature.createPointFeature(new Location(4.85980,45.75336)); markers.addFeature(marker); map.addLayer(markers); } ]]> </fx:Script>

7

Add another marker

Write these two lines before adding the layer ( )map.addLayer(markers);

marker = PointFeature.createPointFeature(new Location(4.85980,45.75336));markers.addFeature(marker);

8

Add marker with custom symbol

Symbol from URL address:Add this import next to the others:

Add the marker using the static CustomMarker.createUrlBasedMarker(url, point) before adding the layer ( ):

import org.openscales.core.feature.CustomMarker;

markers.addFeature(CustomMarker.createUrlBasedMarker("http://earth.google.com/intl/en_uk/outreach/images/add_placemark.png",

new Location(4.85980,45.75336)));

map.addLayer(markers);

9

Here you are

Right now, you’re able to add markers to your OpenScales maps.

Find sources: http://www.openscales.org/tutorials/