Stop access to geojson files through targeted media queries

Question

Stop access to geojson files through targeted media queries

Using a vue.js app, I have the ability to choose locations using either a map or an input field. However, for mobile users, I want to exclude the map and only serve the search engine.

The issue is that it's not very user-friendly on mobile devices because even though I have prevented the map from displaying with a media query, I am still unable to prevent the downloading of a large geojson file and other related data files.

The imports are structured like this:

//modules for leaflet
import Vue2Leaflet from '../../node_modules/vue2-leaflet/dist/vue2-leaflet.js'; 
import { InfoControl, ReferenceChart, ChoroplethLayer } from 'vue-choropleth'
//geojson and data files
import { geojsonA } from '../../data/mygeojson.min.geojson' 
import { specificData } from '../../data/mydata.js'

and in the styles:

@media (min-width: 640px) {
  .mobile {
    display: none;
  }
  //other styles
}

Is there a way to selectively block import based on media queries or any other method for specific displays?

css vue.js

Answer 1

Answer №1

In order to make conditions based on the width of the window in Vue, it is necessary to define the media query in JavaScript as well. Since these values are not reactive and cannot be easily watched with Vue, a custom watcher needs to be implemented.

Here is an illustration of how this can be done: The <test/> element will only be displayed if the screen meets certain width criteria. If the screen width does not meet the requirements, the element will not be loaded (v-if removes it from the DOM). A event listener for the resize event of the window is added during the mounted lifecycle hook. This listener updates a value each time the window is resized, which can then be used in a computed property called largeScreen to determine if the screen is considered large or not. This boolean value is used in the template rendering logic. Finally, remember to remove any custom event listeners in the beforeDestroy lifecycle hook to avoid multiple definitions.

Vue.component('test', {
  template: '<div>Large screen; <code>test</code> is loaded.</div>'
});

new Vue({
  el: '#app',
  data: function() {
    return {
      windowWidth: 0
    };
  },
  mounted() {
    this.setWindowWidth();
    window.addEventListener('resize', this.setWindowWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setWindowWidth);
  },
  computed: {
    largeScreen: function() {
      return this.windowWidth > 640;
    }
  },
  methods: {
    setWindowWidth: function() {
      this.windowWidth = window.innerWidth;
    }
  }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Screen width is: <code>{{ windowWidth }}px</code>

  <test v-if="largeScreen" />
</div>

Answer 2

In order to make conditions based on the width of the window in Vue, it is necessary to define the media query in JavaScript as well. Since these values are not reactive and cannot be easily watched with Vue, a custom watcher needs to be implemented.

Here is an illustration of how this can be done: The <test/> element will only be displayed if the screen meets certain width criteria. If the screen width does not meet the requirements, the element will not be loaded (v-if removes it from the DOM). A event listener for the resize event of the window is added during the mounted lifecycle hook. This listener updates a value each time the window is resized, which can then be used in a computed property called largeScreen to determine if the screen is considered large or not. This boolean value is used in the template rendering logic. Finally, remember to remove any custom event listeners in the beforeDestroy lifecycle hook to avoid multiple definitions.

Vue.component('test', {
  template: '<div>Large screen; <code>test</code> is loaded.</div>'
});

new Vue({
  el: '#app',
  data: function() {
    return {
      windowWidth: 0
    };
  },
  mounted() {
    this.setWindowWidth();
    window.addEventListener('resize', this.setWindowWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setWindowWidth);
  },
  computed: {
    largeScreen: function() {
      return this.windowWidth > 640;
    }
  },
  methods: {
    setWindowWidth: function() {
      this.windowWidth = window.innerWidth;
    }
  }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Screen width is: <code>{{ windowWidth }}px</code>

  <test v-if="largeScreen" />
</div>

Answer 3

Answer №2

Utilize matchMedia in JavaScript to establish media query breakpoints:

Learn more about matchMedia on MDN

if (window.matchMedia("(min-width: 400px)").matches) {
  /* When the viewport is at least 400 pixels wide */
} else {
  /* When the viewport is less than 400 pixels wide */
}

This method offers excellent support and may be simpler to implement compared to using a resize listener, while also being more efficient in terms of resources.

Answer 4

Utilize matchMedia in JavaScript to establish media query breakpoints:

Learn more about matchMedia on MDN

if (window.matchMedia("(min-width: 400px)").matches) {
  /* When the viewport is at least 400 pixels wide */
} else {
  /* When the viewport is less than 400 pixels wide */
}

This method offers excellent support and may be simpler to implement compared to using a resize listener, while also being more efficient in terms of resources.

Stop access to geojson files through targeted media queries

Answer №1

Answer №2

Similar questions

Lock the "tr" element dynamically at the bottom of the table

Tips for accessing a composition function in VueJS from another composition

Ways to make a DIV element extend to fill the height of its parent container

What is the best way to delete spaces between span elements while preserving the spaces within each individual span tag?

Experience the magic of playing HTML5 video within the sleek confines of an iPhone image

What is the best way to design a div that showcases text on top of a background image, complete with a pointer or arrow, and automatically adjusts its width to properly display the

Customizing colors in React Material UI

Seamlessly connect Gridsome with HubSpot for advanced page tracking

Unexpected issue encountered for identifiers beginning with a numerical digit

Display the hover effect for the current card when the mouse is over it

vue-authenticate: Can you point me to the location where the $auth variable is defined?

Aligning a table at the center of another table

SwipeJS is not compatible with a JQuery-Mobile web application

How do I trigger a click event on an autocomplete search bar in Vue with a router link enabled?

Unlocking the variables within a v-for loop post-mounted: A guide to accessing and updating them

Organizing CSS DIV code by sections for desktops and mobile devices

Grid of domes, fluid contained within fixed structures and beyond

What is the best way to position an image next to an input element?

Tooltip not appearing in designated spot as designed

Using Vue JS to dynamically update checkboxes when a radio button is selected