Skip to main content

I have two datasets, one with polygons and names and one with data.

I load the map in the LHS of the screen and use the refine-on-click feature within <ods-map-layer to load a HTML table on the RHS of the screen.

However, I’d like to be able to have the map show the selection.

I’ve tried using highlight-on-refine="true" but I suspect this doesn’t work because the data on the map is not actually being refreshed!

Here is my code:!--scriptorendfragment-->

<div class="row ods-box">
    <ods-dataset-context context="dfesmap,dfesdata"
                         dfesmap-dataset="dfes-primary-polygons"
                         dfesdata-dataset="dfes-2023-primary-data0">
        <div class="col-md-8">
            <ods-map style="height:560px" scroll-wheel-zoom="true">
                <ods-map-layer context="dfesmap"
                               display="choropleth"
                               refine-on-click-context="dfesdata"
                               refine-on-click-dfesdata-map-field="pry_number_alias"
                               refine-on-click-dfesdata-context-field="group_number"
                               refine-on-click-dfesdata-replace-refine="true"
                               highlight-on-refine="true"
                               color="#3D3D3D">
                </ods-map-layer>
            </ods-map>
        </div>

<div class="col-md-4">
    <p>Current filter: {{ dfesdata.parametersm'refine.group_number'] }}</p>

    <div ng-if="!dfesdata.parametersm'refine.group_number']">
        <h3>Select an area on the map</h3>
    </div>

    <div ng-if="dfesdata.parametersm'refine.group_number']">
        <span class="ods-button" ng-click="dfesdata.parameters = {};">
            Clear filter
        </span>
        <h3>Filtered by: {{ dfesdata.parametersm'refine.group_number'] }}</h3>
        <h2>Area Data</h2>

        <table class="styled-table">
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Scenario</th>
                    <th>Max Demand (MVA)</th>
                </tr>
            </thead>
            <tbody ods-results="items" ods-results-context="dfesdata">
                <tr ng-repeat="item in items">
                    <td>{{ item.fields.year }}</td>
                    <td>{{ item.fields.scenario }}</td>
                    <td>{{ item.fields.primary_substation_maximum_demand_mva }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


    </ods-dataset-context>
</div>

 

Hi, 

 

Sorry for the delay, 

you can have a look to this resource on the Code Library : https://codelibrary.opendatasoft.com/widget-tricks/ods-map-tricks/#replace-map-tooltip-with-a-refine--see-the-aggregation-

and see in the code that there is a dedicated layer, to highlight the shape, with a red stroke and transparent color. 
 

<ods-map-layer context="refinectx"
               show-if="refinectx.parametersm'refine.dep_code']"
               color="transparent"
               border-color="red"
               border-opacity="1"
               border-size="3"></ods-map-layer>

 

The show-if expression display the layer only when the shape is selected.

 

If you can’t make it work on your page, let me know I’ll try to adapt this second layer based on the code you provided. 

 

Thanks

Thanks for this. 

I understand the flow of the example code, but I can’t see to get it working in my context. 

Current code: 

  <ods-map-layer context="dfesmap"
                               show-if="dfesmap.parametersi'group_number']"
                               color="transparent"
                               border-color="red"
                               border-opacity="1"
                               border-size="3"></ods-map-layer>
            </ods-map>

I’ve also tried ‘pri_number_alias’ in the show-if clause

Ho, I see that you have a display=”choropleth” mode and not a display="categories" like on the example. 

Maybe it’s related. As you probably have multiple records par shape. 

 

Before going into more tests, did you add the new layer after (below) the first one ? The order is important to make sure that the red border will be displayed on top of the other shapes.

 

Can you give me access to your portal, page and dataset, to see how it behaves ?

frederic.passaniti@opendatasoft.com

 

Thanks

Reply


Terms & ConditionsCookie settings
Opendatasoft Terms & Conditions Cookie settings