Tutorial - Simple Point

First, let's create our map and add a base map. Also, to keep it simple, we import our data inline.

Step 1

Active

Inactive

We create a layer first.

Step 2

Active

Inactive

Then create point feature and set the data.

Step 3

Active

Inactive

We can also use GeoJSON and the GeoJSON reader to create the point feature.

var geojsonCities = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-74.0059413,40.7127837]},"properties":{"name":"New York","population":"8405837"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-118.2436849,34.0522342]},"properties":{"name":"Los Angeles","population":"3884307"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-87.6297982,41.8781136]},"properties":{"name":"Chicago","population":"2718782"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-95.3698028,29.7604267]},"properties":{"name":"Houston","population":"2195914"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.1652215,39.9525839]},"properties":{"name":"Philadelphia","population":"1553165"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-112.0740373,33.4483771]},"properties":{"name":"Phoenix","population":"1513367"}}]};

var reader = geo.createFileReader('geojsonReader', { 'layer': layer });
reader.read(geojsonCities, function (features) {
  features[0].draw();
  // Or we can draw the whole map
  // map.draw();
});

Step 3-B

Active

Inactive

We could change the style of our point feature.

Step 4

Active

Inactive

We can make the points draggable.

// we store the current city in this value
let focusCity;
// we copy the current city here when we start dragging
let startingPosition;
// when the mouse goes over a city, record that it has done so and add some
// actions so that touch and mouse pans are ignored and our own action is
// used instead.
feature.geoOn(geo.event.feature.mouseon, (evt) => {
  focusCity = cities[evt.index];
  startingPosition = Object.assign({}, focusCity);
  map.interactor().addAction({
    action: 'dragpoint',
    name: 'drag point with mouse',
    owner: 'example',
    input: 'left'});  // left mouse drag
  map.interactor().addAction({
    action: 'dragpoint',
    name: 'drag point with touch',
    owner: 'example',
    input: 'pan'});  // touch drag
});
// when the mouse leaves a city, discard the special actions so panning
// works again
feature.geoOn(geo.event.feature.mouseoff, (evt) => {
  focusCity = undefined;
  map.interactor().removeAction(undefined, undefined, 'example');
});
// when our action fires, use the action delta in the map interface
// coordinate system to move the focusCity city.
feature.geoOn(geo.event.actionmove, (evt) => {
  if (evt.state.action !== 'dragpoint' || focusCity === undefined) {
    return;
  }
  // evt.mouse.geo is the current mouse position in the map interface gcs.
  // evt.state.origin.geo is the mouse position when the action started in
  // the map interface gcs.
  focusCity.lon = startingPosition.lon + evt.mouse.geo.x - evt.state.origin.geo.x;
  focusCity.lat = startingPosition.lat + evt.mouse.geo.y - evt.state.origin.geo.y;
  // mark that the feature's data has changed so that positions will be
  // recomputed.  We could have also done "feature.data(cities)".
  feature.dataTime().modified();
  // draw the change
  feature.draw();
});

Step 5

Active

Inactive