Resimplifi Serve℠

Welcome to Resimplifi Serve℠ examples and documentation. Below are some examples of how to use Serve℠. Each example has a View Full Screen link if you'd like to see a larger map.

Basic Example

Here's a basic example showing national active listings. Zoom in on the map to show more listings.

View Full Screen

You can access the national active listings tileset using this url:

https://serve.resimplifi.com/tiles/national:listings.json?token=SERVE_API_TOKEN

The total visible listings will drop as zoom decreases. Use cluster layers to show listings at a lower zoom level. Check out the next example for clusters that change to listings on zoom in.

Here's the full code for the basic example:

<div id="examples-basic" style="width: 100%; height: 100%;"></div>
<script>
var SERVE_API_TOKEN = 'pk.eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiRGVtbyJ9.dKO6zs_wEPvKEFbwpvslttUQV02KYkr-4OskiG0NszM'
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN

var basicMap = new mapboxgl.Map({
  container: 'examples-basic',
  center: [-97, 33],
  zoom: 7,
  attribution: 'Resimplifi',
})

basicMap.addControl(new mapboxgl.NavigationControl())

basicMap.on('load', function() {
  basicMap.addSource('resimplifi-listings', {
    type: 'vector',
    attribution: '© Resimplifi',
    url: 'https://serve.resimplifi.com/tiles/national:listings.json?token=' + SERVE_API_TOKEN,
  })

  basicMap.addLayer({
    id: 'resimplifi-listings',
    type: 'circle',
    source: 'resimplifi-listings',
    'source-layer': 'listings',
    paint: {
      'circle-radius': 4,
      'circle-color': 'black',
      'circle-stroke-width': .5,
      'circle-stroke-color': 'white',
    },
  })
})
</script>

Clusters Example

Here's an example with clusters at a lower zoom and the points layer at a higher zoom.

View Full Screen

This is the URL for clusters:

https://serve.resimplifi.com/tiles/national:clusters-50.json?token=SERVE_API_TOKEN

And the full example code:

<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<div id="examples-clusters" style="width: 100%; height: 100%;"></div>
<script>
var SERVE_API_TOKEN = 'pk.eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiRGVtbyJ9.dKO6zs_wEPvKEFbwpvslttUQV02KYkr-4OskiG0NszM'
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN

var clustersMap = new mapboxgl.Map({
  container: 'examples-clusters',
  center: [-97, 33],
  zoom: 7,
  attribution: 'Resimplifi',
})

clustersMap.addControl(new mapboxgl.NavigationControl())

clustersMap.on('load', function() {
  clustersMap.addSource('resimplifi-listings', {
    type: 'vector',
    attribution: '© Resimplifi',
    url: 'https://serve.resimplifi.com/tiles/national:listings.json?token=' + SERVE_API_TOKEN,
  })

  clustersMap.addLayer({
    id: 'resimplifi-listings',
    type: 'circle',
    source: 'resimplifi-listings',
    'source-layer': 'listings',
    minzoom: 12,
    paint: {
      'circle-radius': 4,
      'circle-color': 'black',
      'circle-stroke-width': .5,
      'circle-stroke-color': 'white',
    },
  })

  clustersMap.addSource('resimplifi-clustered-listings', {
    type: 'vector',
    attribution: '© Resimplifi',
    url: 'https://serve.resimplifi.com/tiles/national:clusters-50.json?token=' + SERVE_API_TOKEN,
  })

  clustersMap.addLayer({
    id: 'listings-clusters',
    type: 'symbol',
    source: 'resimplifi-clustered-listings',
    'source-layer': 'listings',
    filter: ['has', 'point_count'],
    type: 'circle',
    maxzoom: 12,
    paint: {
      'circle-color': '#000000',
      'circle-radius': 16,
      'circle-stroke-color': '#000000',
      'circle-stroke-opacity': 0.25,
      'circle-stroke-width': 5,
    },
  })

  clustersMap.addLayer({
    id: 'resimplifi-clusters-count',
    source: 'resimplifi-clustered-listings',
    'source-layer': 'listings',
    filter: ['has', 'point_count'],
    type: 'symbol',
    maxzoom: 12,
    layout: {
      'text-field': '{point_count_abbreviated}',
      'text-font': ['Roboto Medium'],
      'text-size': 12,
      'text-offset': [0, 0.15],
    },
    paint: {
      'text-color': '#ffffff',
    },
  })

})
</script>

Listing Information Example

Click on a listing dot in this example to show a popup with information about the listing.

View Full Screen

You can access full listing data with this endpoint:

https://serve.resimplifi.com/listings/{id}?token=SERVE_API_TOKEN

Use the listings data endpoint in tandem with the tiles service to create a fully featured data experience. The full code:

<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<div id="examples-listing-info" style="width: 100%; height: 100%;"></div>
<script>
var SERVE_API_TOKEN = 'pk.eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiRGVtbyJ9.dKO6zs_wEPvKEFbwpvslttUQV02KYkr-4OskiG0NszM'
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN

var listingInfoMap = new mapboxgl.Map({
  container: 'examples-listing-info',
  center: [-97, 33],
  zoom: 13,
  attribution: 'Resimplifi',
})

listingInfoMap.addControl(new mapboxgl.NavigationControl())

listingInfoMap.on('load', function() {
  listingInfoMap.addSource('resimplifi-listings', {
    type: 'vector',
    attribution: '© Resimplifi',
    url: 'https://serve.resimplifi.com/tiles/national:listings.json?token=' + SERVE_API_TOKEN,
  })

  listingInfoMap.addLayer({
    id: 'resimplifi-listings',
    type: 'circle',
    source: 'resimplifi-listings',
    'source-layer': 'listings',
    paint: {
      'circle-radius': 4,
      'circle-color': 'black',
      'circle-stroke-width': .5,
      'circle-stroke-color': 'white',
    },
  })

  listingInfoMap.on('mousemove', (e) => {
    var features = listingInfoMap.queryRenderedFeatures(e.point)
    var canvas = document.querySelector('#examples-listing-info canvas')

    if (features.length) {
      document.querySelector('#examples-listing-info canvas').style.cursor = 'pointer'
    } else {
      document.querySelector('#examples-listing-info canvas').style.cursor = 'grab'
    }
  })

  listingInfoMap.on('click', (e) => {
    var features = listingInfoMap.queryRenderedFeatures(e.point)
    if (features.length > 0) {
      var feature = features[0]
      fetch('/listings/' + feature.properties.id)
        .then((response) => response.json())
        .then((data) => {
          var content = ''
          if (data.images.length > 0) {
            content += '<img style="margin-bottom: 10px" src="' + data.images[0].thumbnail_url + '" />'
          }
          content += '<h4><strong>' + data.name + '</strong></h4>'
          content += '<p>' + [
            data.property.address,
            data.property.address_2
          ].filter(v => v).join(' ') + '</p>'
          content += '<p>' + [
            data.property.city,
            data.property.state_abbr,
            data.property.zip_code,
          ].filter(v => v).join(', ') + '</p>'
          content += '<p>' + (data.type == 'lease' ? 'Lease' : data.type == 'sale' ? 'Sale' : 'Sale/Lease') + '</p>'
          content += '<p>' + data.property_types.join(', ') + '</p>'
          if (data.source_url) {
            content += '<a style="text-decoration: underline" href="' + data.source_url + '" target="_blank">View Source</a>'
          }
          var popup = new mapboxgl.Popup()
            .setLngLat(feature.geometry.coordinates)
            .setHTML(content)
            .addTo(listingInfoMap)
        })


    }
  })
})
</script>