Tutorial - Simple Point

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

xxxxxxxxxx
 
var map = geo.map({
  node: "#map",
  center: { x: -97.67, y: 31.80 },
  zoom: 4
});
map.createLayer('osm');
​
var cities = [
  {lon: -74.0059413, lat: 40.7127837, name: "New York", population: 8405837},
  {lon: -118.2436849, lat: 34.0522342, name: "Los Angeles", population: 3884307},
  {lon: -87.6297982, lat: 41.8781136, name: "Chicago", population: 2718782},
  {lon: -95.3698028, lat: 29.7604267, name: "Houston", population: 2195914},
  {lon: -75.1652215, lat: 39.9525839, name: "Philadelphia", population: 1553165},
  {lon: -112.0740373, lat: 33.4483771, name: "Phoenix", population: 1513367}
];
Step 1
Active
Inactive

We create a layer first.

xxxxxxxxxx
 
var layer = map.createLayer('feature', {features: ['point']});
Step 2
Active
Inactive

Then create point feature and set the data.

xxxxxxxxxx
 
var feature = layer.createFeature('point')
  .data(cities)
  .position(function (city) {
    return {
      x: city.lon,
      y: city.lat
    };
  })
  .draw();
Step 3
Active
Inactive

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

xxxxxxxxxx
 
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.

xxxxxxxxxx
 
feature.style('fillColor', 'red')
  .style({
    'strokeColor': 'black',
    'strokeWidth': 2
  })
  .draw();
Step 4
Active
Inactive

We can make the points draggable.

xxxxxxxxxx
 
// 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