Maps

HydroLang contains two visualization modules: maps and visualize. The maps module includes functions for generating maps on the fly using simple commands, leveraging the Google Maps and Leaflet libraries. To create a map, generate a new instance of the library by calling:

const hydrolang = new Hydrolang();
hydrolang.map.renderMap({ params: { maptype: "leaflet", lat: 40.75, lon: -111.87, }});

const hydrolang = new Hydrolang();
const main = async () => {hydrolang.map.renderMap({ params: { maptype: "leaflet", lat: 40.75, lon: -111.87, }});
};
main();

Info

The Leaflet library is free of charge and requires nothing for its usage. If you would like to use the Google Maps library, you need to create an account and follow the instructions on the developers' page. The instruction will call the map library and allow it to be available for usage.

Let’s draw on the map using drawing tools available using the following command:

hydrolang.map.Layers({ args: { type: "draw" }});

How can we draw markers using this interface? Well we can do it by either drawing on screen or passing through the Layers method. We can do the latter by doing:

hydrolang.map.Layers({ args: { type: "marker", output: "myStation" }, data: [40.71, -111.96]});

We can also draw geoJSON and KML files using the Layers method.

hydrolang.map.Layers({ args: { type: "geojson", output: "mygeoJSON" }, data:
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [-111.8910, 40.7608]
      }
    }
  ]
}
});

const hydrolang = new Hydrolang();
const main = async () => {await hydrolang.map.renderMap({ params: { maptype: "leaflet", lat: 40.75, lon: -111.87, }});
hydrolang.map.Layers({ args: { type: "draw" }});
hydrolang.map.Layers({ args: { type: "marker", name: "myStation" }, data: [40.71, -111.96]});
hydrolang.map.Layers({ args: { type: "geojson", name: "mygeoJSON" }, data:
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [-111.8910, 40.7608]
      }
    }
  ]
}
});
};
main();

Tip

More info about the data module in the documentation page