leaflet#latLngBounds TypeScript Examples

The following examples show how to use leaflet#latLngBounds. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: map.ts    From aqualink-app with MIT License 6 votes vote down vote up 
getCollectionCenterAndBounds = (
  collection?: CollectionDetails
): [LatLng | undefined, LatLngBounds | undefined] => {
  if (!collection) {
    return [undefined, undefined];
  }

  const coordinates = collection.sites.map((item) =>
    getMiddlePoint(item.polygon)
  );

  const center = new LatLng(
    meanBy(coordinates, (item) => item[1]),
    meanBy(coordinates, (item) => item[0])
  );

  const bounds =
    coordinates.length > 1
      ? new LeafletPolygon(
          coordinates.map((item) => new LatLng(item[1], item[0]))
        ).getBounds()
      : undefined;

  return [center, bounds];
}
Example #2
Source File: map.component.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up 
ngAfterViewInit (): void {
    this.conf.setConfig({
      markerTemplates: {
        'vehicle': {
          layer: 'vehicles',
          shape: {
            type: ShapeType.circle,
            anchored: true,
            plain: true
          },
          inner: {
            icon: 'iotmap-icons-vehicle'
          }
        }
      },
      map: {
        externalClustering: false,
        layerControl: true,
        exclusiveLayers: false
      },
      layerTemplates: {
        'etablissements': {
          content: '<span class="iotmap-icons-School"></span>',
          type: TabType.normal,
          popupColNumber: 2
        },
        'meters': {
          content: '<img width=16 src="../assets/icons/check_your_balance.svg">'
        },
        'autos': {
          content: '<span class="iotmap-icons-4g"></span>',
          type: TabType.large
        }
      },
      markerStatus: {
        'test': {
          name: {
            singular: 'test',
            plural: 'tests'
          },
          bullet: '<span style="color: #527EDB; font-size: 20px"> &#9678;  </span>',
          url: 'http://www.orange.com'
        }
      }
    })

    this.commonIotMap.onMove = () => {
      const coord = this.commonIotMap.getIotMap().getBounds()
      console.log('map bounds changed: [' + coord.getNorthEast().lat + ', ' + coord.getNorthEast().lng + '] / [' + coord.getSouthWest().lat + ', ' + coord.getSouthWest().lng + ']')
    }

    this.commonIotMap.init('iotMap')
    this.iotMapMarkerManager.addMarkers(this.markersList)
    this.iotMapClusterManager.addClusters(this.clustersList)
    this.iotMapUserMarkerManager.addUserMarker(this.userMarker)
    this.iotMapPathManager.addPath(this.chemin)
    // Do the same when you want to override the zoom on a clicked cluster
    this.iotMapClusterManager.updateCluster('cluster 1', { markersArea: new LatLngBounds([44.880, 4.89], [44.885, 4.9])})

    this.iotMapAreaManager.addArea(this.zone)
  }
Example #3
Source File: LayerConstants.ts    From Teyvat.moe with GNU General Public License v3.0 5 votes vote down vote up 
MAP_BOUNDS = latLngBounds([0, 0], [-64, 128])
Example #4
Source File: SchoolsMap.tsx    From po8klasie with GNU General Public License v3.0 5 votes vote down vote up 
SchoolsMap: FC<SchoolsMapProps> = ({ results, onExpandToggle, isExpanded, hideExpandBtn }) => {
  const [map, setMap] = useState<LeafletMap | null>(null);
  const { searchView: searchViewConfig } = useProjectConfig();
  const { mapOptions } = searchViewConfig as SearchViewConfig;

  useEffect(() => {
    setTimeout(() => {
      if (map) map.invalidateSize();
    }, 300);
  }, [isExpanded, map]);

  useEffect(() => {
    if (map && results.length > 0) {
      const lngLatExpressions = results.map((school) => parseCoords(school));
      map.fitBounds(latLngBounds(lngLatExpressions));
    }
  }, [results, map]);

  return (
    <div className={isExpanded ? styles.mapWrapperExpanded : styles.mapWrapper}>
      <MapContainer
        className={styles.map}
        zoomControl={false}
        whenCreated={setMap}
        fullscreenControl
        {...mapOptions}
      >
        <TileLayer {...tileLayerProps} />
        {results.map(({ latitude, longitude, name, id }) => {
          if (!latitude || !longitude) return null;

          return (
            <Marker
              position={{
                lat: parseFloat(latitude),
                lng: parseFloat(longitude),
              }}
              icon={marker}
              key={id}
            >
              <Popup className={styles.markerPopup}>
                <h4>{name}</h4>
              </Popup>
            </Marker>
          );
        })}
      </MapContainer>
      {
        !hideExpandBtn && (
          <button className={styles.mapExpandButton} onClick={onExpandToggle} type="button">
            <BsChevronRight />
          </button>
        )
      }
    </div>
  );
}
Example #5
Source File: map.component.ts    From IOT-Map-Component with MIT License 4 votes vote down vote up 
clustersList: IotCluster[] = [
    {
      id: 'cluster 1',
      location: {
        lat: 44.882,
        lng: 4.895
      },
      // markersArea: new LatLngBounds([44.880, 4.89], [44.885, 4.9]),
      markersArea: new LatLngBounds([0,0], [1,1]),
      contentLabel: 'interfaces',
      colNumber: 2,
      childCount: 4860,
      aggregation: [
        {
          singularState: 'registered',
          pluralState: 'registered',
          count: 1500,
          color: '#527EDB',
          bullet: '<span style="color: #527EDB; font-size: 14px"> &#9711;  </span>'
        },
        {
          singularState: 'initializing',
          pluralState: 'initializing',
          count: 1500,
          color: '#527EDB',
          bullet: '<span style="color: #527EDB; font-size: 20px"> &#9678;  </span>'
        },
        {
          singularState: 'initialized',
          pluralState: 'initialized',
          bullet: '<span style="color: #527EDB; font-size: 24px"> &#10687;  </span>',
          count: 3300,
          color: '#527EDB'
        },
        {
          singularState: 'activated',
          pluralState: 'activated',
          count: 3000,
          color: '#32C832',
          url: 'http://www.orange.fr/fdsfsdf',
          urlTarget: '_blank'
        },
        {
          singularState: 'reactivated',
          pluralState: 'reactivated',
          count: 100,
          color: '#32C832',
          bullet: '<span class= "iotmap-icons-assistance" style="color: #32C832; font-size: 16px"></span>'
        },
        {
          singularState: 'error',
          pluralState: 'errors',
          count: 100,
          color: '#CD3C14'
        },
        {
          singularState: 'deactivated',
          pluralState: 'deactivated',
          count: 100,
          color: '#CCCCCC'
        }]
    },
    {
      id: 'cluster 2',
      location: {
        lat: 44.882,
        lng: 4.89
      },
      // layer: 'autos',
      contentLabel: 'interfaces',
      colNumber: 2,
      childCount: 123000,
      aggregation: [
        {
          singularState: 'registered',
          pluralState: 'registered',
          count: 18000,
          color: '#527EDB',
          bullet: '<span style="color: #527EDB; font-size: 14px"> &#9711;  </span>'
        },
        {
          singularState: 'initializing',
          pluralState: 'initializing',
          count: 15000,
          color: '#527EDB',
          bullet: '<span style="color: #527EDB; font-size: 20px"> &#9678;  </span>'
        },
        {
          singularState: 'initialized',
          pluralState: 'initialized',
          bullet: '<span style="color: #527EDB; font-size: 24px"> &#10687;  </span>',
          count: 33000,
          color: '#527EDB'
        },
        {
          singularState: 'activated',
          pluralState: 'activated',
          count: 30000,
          color: '#32C832',
          url: 'http://www.orange.fr/fdsfsdf',
          urlTarget: '_blank'
        },
        {
          singularState: 'reactivated',
          pluralState: 'reactivated',
          count: 10000,
          color: '#32C832',
          bullet: '<span class= "iotmap-icons-assistance" style="color: #32C832; font-size: 16px"></span>'
        },
        {
          singularState: 'error',
          pluralState: 'errors',
          count: 10000,
          color: '#CD3C14'
        },
        {
          singularState: 'deactivated',
          pluralState: 'deactivated',
          count: 10000,
          color: '#CCCCCC'
        }]
    },
    {
      id: 'cluster 3',
      location: {
        lat: 44.882,
        lng: 4.885
      },
      layer: 'vehicles',
      contentLabel: 'Entertainment',
      childCount: 12000,
      aggregation: [
        {
          singularState: 'registered',
          pluralState: 'registered',
          count: 5000,
          color: '#527EDB',
          bullet: '<span style="color: #527EDB; font-size: 14px"> &#9711;  </span>'
        },
        {
          singularState: 'initializing',
          pluralState: 'initializing',
          count: 3000,
          color: '#527EDB',
          bullet: '<span style="color: #527EDB; font-size: 20px"> &#9678;  </span>'
        },
        {
          singularState: 'initialized',
          pluralState: 'initialized',
          bullet: '<span style="color: #527EDB; font-size: 24px"> &#10687;  </span>',
          count: 2000,
          color: '#527EDB'
        },
        {
          singularState: 'activated',
          pluralState: 'activated',
          count: 2000,
          color: '#32C832',
          url: 'http://www.orange.fr/fdsfsdf',
          urlTarget: '_blank'
        }]
    }
  ];