Thursday 9 August 2018

react google map 2

project site: http://chuanshuoge1-react-map.surge.sh/

traffic layer

panorama view 

drawing manager

traffic layer

import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';

import { compose, withProps } from "recompose";
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    TrafficLayer,
} from "react-google-maps";

class Traffic extends Component {
    constructor(props) {
        super(props);

        this.state = {

        };
    }

    render() {
        const MyMap = compose(
            withProps({
                googleMapURL: googleUrl.url1,
                loadingElement: <div style={{ height: `100%` }} />,
                containerElement: <div style={{ height: `400px` }} />,
                mapElement: <div style={{ height: `100%` }} />,
            }),
            withScriptjs,
            withGoogleMap
        )(props =>
            <GoogleMap
                defaultZoom={8}
                defaultCenter={{ lat: 41.9, lng: -87.624 }}
            >
                <TrafficLayer autoUpdate />
            </GoogleMap>
            );

        return (
            <MyMap />
        );
    }
}

export default Traffic;

-----------------------------------------

street view

import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';

import { compose, withProps} from "recompose";
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    StreetViewPanorama,
    OverlayView,
} from "react-google-maps";
import FaAnchor from "react-icons/lib/fa/anchor";

const getPixelPositionOffset = (width, height) => ({
    x: -(width / 2),
    y: -(height / 2),
})

class StreetView extends Component {
    constructor(props) {
        super(props);

        this.state = {

        };
    }

    render() {
        const MyMap = compose(
            withProps({
                googleMapURL: googleUrl.url1,
                loadingElement: <div style={{ height: `100%` }} />,
                containerElement: <div style={{ height: `400px` }} />,
                mapElement: <div style={{ height: `100%` }} />,
                center: { lat: 49.2853171, lng: -123.1119202 },
            }),
            withScriptjs,
            withGoogleMap
        )(props =>
            <GoogleMap defaultZoom={8} defaultCenter={props.center}>
                <StreetViewPanorama defaultPosition={props.center} visible>
                    <OverlayView
                        position={{ lat: 49.28590291211115, lng: -123.11248166065218 }}
                        mapPaneName={OverlayView.OVERLAY_LAYER}
                        getPixelPositionOffset={getPixelPositionOffset}
                    >
                        <div style={{ background: `red`, color: `white`, padding: 5, borderRadius: `50%` }}>
                            OverlayView
        </div>
                    </OverlayView>
                </StreetViewPanorama>
            </GoogleMap>
            );

        return (
            <MyMap />
        );
    }
}

export default StreetView;

------------------------------------------

kml layer

import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';

import { compose, withProps } from "recompose";
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    KmlLayer,
} from "react-google-maps";

class Kml extends Component {
    constructor(props) {
        super(props);

        this.state = {

        };
    }

    render() {
        const MyMap = compose(
            withProps({
                googleMapURL: googleUrl.url1,
                loadingElement: <div style={{ height: `100%` }} />,
                containerElement: <div style={{ height: `400px` }} />,
                mapElement: <div style={{ height: `100%` }} />,
                center: { lat: -34.397, lng: 150.644 },
            }),
            withScriptjs,
            withGoogleMap
        )(props =>
            <GoogleMap
                defaultZoom={9}
                defaultCenter={{ lat: 41.9, lng: -87.624 }}
            >
                <KmlLayer
                    url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"
                    options={{ preserveViewport: true }}
                />
            </GoogleMap>
            );

        return (
            <MyMap />
        );
    }
}

export default Kml;

-------------------------------------------

ground overlay

import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';

import { compose, withProps} from "recompose";
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    GroundOverlay,
} from "react-google-maps";

const google = window.google;

class MapWithGroundOverlay extends Component {
    constructor(props) {
        super(props);

        this.state = {

        };
    }

    render() {
        const MyMap = compose(
            withProps({
                googleMapURL: googleUrl.url1,
                loadingElement: <div style={{ height: `100%` }} />,
                containerElement: <div style={{ height: `400px` }} />,
                mapElement: <div style={{ height: `100%` }} />,
                center: { lat: -34.397, lng: 150.644 },
            }),
            withScriptjs,
            withGoogleMap
        )(props =>
            <GoogleMap
                defaultZoom={12}
                defaultCenter={{ lat: 40.740, lng: -74.18 }}
            >

                <GroundOverlay
                    defaultUrl="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
                    defaultBounds={new google.maps.LatLngBounds(
                        new google.maps.LatLng(40.712216, -74.22655),
                        new google.maps.LatLng(40.773941, -74.12544)
                    )}
                    defaultOpacity={.5}
                />
            </GoogleMap>
            );

        return (
            <MyMap />
        );
    }
}

export default MapWithGroundOverlay;

----------------------------------------

drawing manager

import React, { Component } from 'react';
import '../App.css';
import googleUrl from './key';

import { compose, withProps } from "recompose";
import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
} from "react-google-maps";
import { DrawingManager } from "react-google-maps/lib/components/drawing/DrawingManager";

const google = window.google;

class MapWithADrawingManager extends Component {
    constructor(props) {
        super(props);

        this.state = {

        };
    }

    render() {
        const MyMap = compose(
            withProps({
                googleMapURL: googleUrl.url3,
                loadingElement: <div style={{ height: `100%` }} />,
                containerElement: <div style={{ height: `400px` }} />,
                mapElement: <div style={{ height: `100%` }} />,
            }),
            withScriptjs,
            withGoogleMap
        )(props =>
            <GoogleMap
                defaultZoom={8}
                defaultCenter={new google.maps.LatLng(-34.397, 150.644)}
            >

                <DrawingManager
                    defaultDrawingMode={google.maps.drawing.OverlayType.CIRCLE}
                    defaultOptions={{
                        drawingControl: true,
                        drawingControlOptions: {
                            position: google.maps.ControlPosition.TOP_CENTER,
                            drawingModes: [
                                google.maps.drawing.OverlayType.CIRCLE,
                                google.maps.drawing.OverlayType.POLYGON,
                                google.maps.drawing.OverlayType.POLYLINE,
                                google.maps.drawing.OverlayType.RECTANGLE,
                            ],
                        },
                        circleOptions: {
                            fillColor: `#ffff00`,
                            fillOpacity: 1,
                            strokeWeight: 5,
                            clickable: false,
                            editable: true,
                            zIndex: 1,
                        },
                    }}
                />
            </GoogleMap>
            );

        return (
            <MyMap />
        );
    }
}

export default MapWithADrawingManager;

reference:

No comments:

Post a Comment