.. _map-view: ******** Map View ******** .. autoclass:: tethys_sdk.gizmos.MapView .. _gizmo_mvlayer: MVLayer ------- .. autoclass:: tethys_sdk.gizmos.MVLayer MVLegendClass ------------- .. autoclass:: tethys_sdk.gizmos.MVLegendClass MVLegendImageClass ------------------ .. autoclass:: tethys_sdk.gizmos.MVLegendImageClass MVLegendGeoServerImageClass --------------------------- .. autoclass:: tethys_sdk.gizmos.MVLegendGeoServerImageClass MVDraw ------ .. autoclass:: tethys_sdk.gizmos.MVDraw MVView ------ .. autoclass:: tethys_sdk.gizmos.MVView .. _map_view_gizmo_js: JavaScript API -------------- For advanced features, the JavaScript API can be used to interact with the OpenLayers map object that is generated by the Map View JavaScript library. TETHYS_MAP_VIEW.getMap() ++++++++++++++++++++++++ This method returns the OpenLayers map object. You can use the `OpenLayers Map API version 5.3.0 `_ to perform operations on this object such as adding layers and custom controls. :: $(function() { //wait for page to load var ol_map = TETHYS_MAP_VIEW.getMap(); ol_map.addLayer(...); ol_map.setView(...); }); .. caution:: The Map View Gizmo is powered by OpenLayers version 5.3.0 by default. When referring to the OpenLayers documentation, ensure that you are browsing the correct version of documentation (see the URL of the documentation page). TETHYS_MAP_VIEW.updateLegend() ++++++++++++++++++++++++++++++ This method can be used to update the legend after removing/adding layers to the map. :: $(function() { //wait for page to load var ol_map = TETHYS_MAP_VIEW.getMap(); ol_map.addLayer(...); TETHYS_MAP_VIEW.updateLegend(); }); TETHYS_MAP_VIEW.zoomToExtent(latlongextent) +++++++++++++++++++++++++++++++++++++++++++ This method can be used to set the view of the map to the extent provided. The extent is assumed to be given in the EPSG:4326 coordinate reference system. :: $(function() { //wait for page to load var extent = [-109.49945001309617, 37.58047995600726, -109.44540360290348, 37.679502621605735]; TETHYS_MAP_VIEW.zoomToExtent(extent); }); TETHYS_MAP_VIEW.clearSelection() ++++++++++++++++++++++++++++++++ This method applies to the WMS layer feature selection functionality. Use this method to clear the current selection via JavaScript. :: TETHYS_MAP_VIEW.clearSelection(); TETHYS_MAP_VIEW.overrideSelectionStyler(geometry_type, styler) ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ This method applies to the WMS layer feature selection functionality. This method can be used to override the default styling for the points, lines, and polygons selected feature layers. * geometry_type (str): The type of the layer that the styler function will apply to. One of: 'points', 'lines', or 'polygons'. * styler (func): A function that accepts two arguments, feature and resolution, and returns an array of valid ol.style objects. :: function my_styler(feature, resolution) { var image, properties; properties = feature.getProperties(); // Default icon image = new ol.style.Circle({ radius: 5, fill: new ol.style.Fill({ color: 'red' }) }); if ('type' in properties) { if (properties.type === 'TANK') { image = new ol.style.RegularShape({ fill: new ol.style.Fill({ color: SELECTED_NODE_COLOR }), stroke: new ol.style.Stroke({ color: 'white', width: 1 }), points: 4, radius: 14, rotation: 0, angle: Math.PI / 4 }); } else if (properties.type === 'RESERVOIR') { image = new ol.style.RegularShape({ fill: new ol.style.Fill({ color: SELECTED_NODE_COLOR }), stroke: new ol.style.Stroke({ color: 'white', width: 1 }), points: 3, radius: 14, rotation: 0, angle: 0 }); } } return [new ol.style.Style({image: image})]; } TETHYS_MAP_VIEW.overrideSelectionStyler('points', my_styler); TETHYS_MAP_VIEW.onSelectionChange(callback) +++++++++++++++++++++++++++++++++++++++++++ This method applies to the WMS layer feature selection functionality. The callback function provided will be called each time the feature selection is changed. * callback (func): A function that accepts three arguments, points_layer, lines_layer, polygons_layer. These are handles on the OpenLayers layers that are rendering the selected features. The features are divided into three layers by type. :: function my_callback(points_layer, lines_layer, polygons_layer) { console.log(points_layer); } TETHYS_MAP_VIEW.onSelectionChange(my_callback); TETHYS_MAP_VIEW.getSelectInteraction() ++++++++++++++++++++++++++++++++++++++ This method applies to the WFS/GeoJSON/KML layer feature selection functionality. :: $(function() { //wait for page to load var selection_interaction = TETHYS_MAP_VIEW.getSelectInteraction(); //when selected, print feature to developers console selection_interaction.getFeatures().on('change:length', function(e) { if (e.target.getArray().length > 0) { // this means there is at least 1 feature selected var selected_feature = e.target.item(0); // 1st feature in Collection console.log(selected_feature); } }); }); TETHYS_MAP_VIEW.mapClicked(callback) ++++++++++++++++++++++++++++++++++++ Provide a callback function to call when the map is clicked on. Only works if `map_click_event` parameter is set to `True` when defining the `MapView`. The function must accept two parameters an array of coordinates (lat, lon) and the click event object. :: TETHYS_MAP_VIEW.mapClicked(function(coordinates, event) { // Custom code to run whenever the map is clicked. }); TETHYS_MAP_VIEW.clearClickedPoint() +++++++++++++++++++++++++++++++++++ Clear the clicked point selected by the user. :: TETHYS_MAP_VIEW.clearClickedPoint(); TETHYS_MAP_VIEW.reInitializeMap() +++++++++++++++++++++++++++++++++ This method is intended for initializing a map generated from an AJAX request. .. caution:: This method assumes there is only one and that there will only ever be one map on the page. .. note:: In order to use this, you will either need to use a MapView gizmo or import the JavaScript/CSS libraries in the main html template page using the ``import_gizmo_dependency`` tag in the ``import_gizmos`` block. For example: :: {% block import_gizmos %} {% import_gizmo_dependency map_view %} {% endblock %} Three elements are required: 1) A controller for the AJAX call with a map view gizmo. .. code-block:: python @controller( url="dam-break/map/dam_break_map_ajax", ) def dam_break_map_ajax(request): """ Controller for the dam_break_map ajax request. """ if request.GET: ... #get layers map_layer_list = ... # Define initial view for Map View view_options = MVView( projection="EPSG:4326", center=[(bbox[0]+bbox[2])/2.0, (bbox[1]+bbox[3])/2.0], zoom=10, maxZoom=18, minZoom=2, ) # Configure the map map_options = MapView( height="500px", width="100%", layers=map_layer_list, controls=["FullScreen"], view=view_options, basemap=["OpenStreetMap"], legend=True, ) context = { "map_options": map_options } return render(request, "dam_break_map_ajax/map_ajax.html", context) 2) A template for with the tethys gizmo (e.g. map_ajax.html) .. code-block:: html+django {% load tethys_gizmos %} {% gizmo map_options %} 3) The AJAX call in the javascript .. code-block:: javascript $(function() { //wait for page to load $.ajax({ url: ajax_url, method: 'GET', data: ajax_data, success: function(data) { //add new map to map div $('#main_map_div').html(data); TETHYS_MAP_VIEW.reInitializeMap(); } }); });